<template>
  <div class="report">
    <!--  汇报页面  -->
    <div class="report-box">
      <!--   主题1   -->
      <div v-if="reportStyle==='blue'" class="reportBlue">
        <!--  名称  -->
        <div class="report-topTitle">
          <div class="report-topTitle-name">
            <span style="margin-bottom: 50px">{{ reportPlanName }}</span>
          </div>
        </div>
        <!--  标题和分页  -->
        <div class="report-titlePage">
          <div v-for="(item, indexF) in titleLists" :key="indexF" @mouseout="item.showTitlePage = false"
               @mouseover="item.showTitlePage = true">
            <div v-if="indexF!==0" :style="item.titleClass" class="report-topTitle-one" @click="changeTitle(indexF)">
              {{ item.titleName }}
            </div>
            <div v-for="(page, indexC) in item.pageLists" v-show="item.showTitlePage" :key="indexC">
              <div class="report-topTitle-two" @click="changePage(page, indexF, indexC)">{{ page.pageName }}</div>
            </div>
          </div>
        </div>
      </div>

      <!--   主题2   -->
      <div v-if="reportStyle==='green'" class="reportGreen">
        <!--  名称  -->
        <div class="report-name">
          <span>
            {{ reportPlanName }}
          </span>
        </div>
        <div class="report-titleCard">
          <el-carousel :autoplay="false" :indicator-position="'none'" height="90px" type="card">
            <el-carousel-item v-for="(item, indexF) in titleLists" :key="indexF" :loop=false>
              <div :style="item.titleClass" class="report-topTitle-one" @click="changeTitle(indexF)">
                {{ item.titleName }}
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!--  分页  -->
        <div v-for="(item, indexF) in titleLists" :key="indexF" class="report-page">
          <div v-for="(page, indexC) in item.pageLists" v-show="item.showTitlePage" :key="indexC"
               class="report-page-one" @click="changePage(page, indexF, indexC)">
            {{ page.pageName }}
          </div>
        </div>
      </div>

      <!--   主题3   -->
      <div v-if="reportStyle==='white'" class="reportWhite">
        <div class="report-name">
          <span>
            {{ reportPlanName }}
          </span>
        </div>
        <div class="reportWhite-btm">
          <div v-for="(item, indexF) in titleLists" v-show="showWhite" :key="indexF" class="report-title"
               @click="changeTitle(indexF)">
            {{ item.titleName }}
          </div>
          <div class="btn">
            <i :class="showWhite?'ri-skip-down-fill':'ri-skip-up-fill'" @click="showWhite=!showWhite"></i>
          </div>
          <!--  分页  -->
          <div v-for="(item, indexF) in titleLists" v-show="showWhite" :key="item.titleName"
               :style="{bottom:getBottomPx(indexF)}" class="report-page">
            <div v-for="(page, indexC) in item.pageLists" v-show="item.showTitlePage" :key="indexC"
                 class="report-page-one"
                 @click="changePage(page, indexF, indexC);showWhiteFalse()">
              {{ page.pageName }}
            </div>
          </div>
        </div>
      </div>

      <!--   顶部右侧菜单按钮   -->
      <div class="report-title-menu">
        <el-dropdown @command="changeReportStyle">
          <el-button>
            <i class="style ri-paint-brush-line"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="changeReportStyle">
            <el-dropdown-item command="blue">科技蓝</el-dropdown-item>
            <el-dropdown-item command="green">撞色绿</el-dropdown-item>
            <el-dropdown-item command="white">简约白</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <i class="programme ri-presentation-line" @click="getLists(false); showReportList = !showReportList"></i>
      </div>
      <!--  方案列表  -->
      <div v-show="showReportList" class="report-planLists">
        <div v-for="(item, index) in reportLists" :key="index" class="">
          <div style="display: flex">
            <div class="report-lists-one">
              {{ item.name }}
            </div>
            <div style="display: flex;justify-content: center;align-items: center;">
              <i class="report-lists-play ri-play-circle-line" @click="changeReport(item);showReportList = false;"></i>
            </div>
            <div style="display: flex;justify-content: center;align-items: center;">
              <router-link
                  :to="{path: '/plan',query: {id: 'edt',data:JSON.stringify({title: item.title,tour:item.tour}),name: item.name}}"
                  style="color: rgba(117, 114, 126, 0.7)">
                <i class="report-lists-edt ri-edit-line"></i>
              </router-link>
            </div>
            <div style="display: flex;justify-content: center;align-items: center;">
              <i class="report-lists-del ri-delete-bin-5-line" @click="deleteReport(item, index)"></i>
            </div>
          </div>
          <hr/>
        </div>
        <div style="display: flex; justify-content: center; align-items: center">
          <router-link :to="{path: '/plan'}" style="color: rgba(117, 114, 126, 0.7)">
            <i class="report-lists-add ri-play-list-add-line">
              <span>新增方案</span>
            </i>
          </router-link>
        </div>
      </div>
      <!--  左侧工具栏  -->
      <div class="report-leftTools">
        <!--   左侧开关按钮   -->
        <div class="report-leftTools-btn">
          <i :class="leftToolsIcon" @click="showLeftToolsF1"></i>
        </div>
        <!--  左侧工具栏  -->
        <div v-show="showLeftTools1" class="report-leftTools-bg"></div>
        <div v-show="showLeftTools1" class="report-leftTools-menu">
          <div class="report-leftTools-flow">
            <div
                v-for="(item, index) in showLeftTools2"
                :key="index"
                class="report-leftTools-flex"
            >
              <div class="report-leftTools-one" @click="showLeftToolsF2(item)">
                <i :class="`${item.icon} report-leftTools-icon`"></i><br/>
                <span>{{ item.name }}</span>
              </div>
              <div v-if="item.children && item.children.length > 0">
                <div v-if="item.show" style="display: flex">
                  <div
                      v-for="(v, i) in item.children"
                      :key="i"
                      class="report-leftTools-one"
                      @click="setLeftTools(v.type)"
                  >
                    <i :class="`${v.icon} report-leftTools-icon`"></i><br/>
                    <span>{{ v.name }}</span>
                  </div>
                </div>
              </div>
              <div
                  v-if="item.type === '0-0' && item.show"
                  class="time-progress-box"
              >
                <el-slider
                    v-model="sliderTime"
                    :marks="marks"
                    :show-tooltip="false" :step="5"
                    class="time-progress-bar"
                    @input="setTime()"
                ></el-slider>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 左固定图表 -->
      <div
          v-show="
          ((titleIndex === 1 && pageIndex === 0) ||
            (titleIndex === 3 && pageIndex === 0) ||
            show24_leftAll) &&
          reportPlanName === '棪慧云创数智孪生汇报平台'
        "
          class="report-left-chart-bg"
      >
        <!--    平台总览左/南纪门    -->
        <div v-show="titleIndex === 1&& pageIndex === 0">
          <div class="report-left-chart-1">
            <div class="left-chart-1-title">
              <span>{{ progressTitle.a }}</span>
            </div>
            <div class="left-chart-1-body">
              <span>{{ leftTxt1 }}</span>
            </div>
          </div>

          <div class="report-left-chart-2">
            <div class="left-chart-2-title">
              <span>{{ progressTitle.b }}</span>
            </div>
            <div class="left-chart-2-body">
              <span v-show="showLeftTxt2">{{ leftTxt2 }}</span>
              <div
                  v-show="this.titleIndex === 1 && !showLeftTxt2"
                  ref="progress"
                  class="body-body"
              ></div>
            </div>
          </div>

          <div class="report-left-chart-3">
            <div class="left-chart-3-title">
              <span>{{ progressTitle.c }}</span>
            </div>
            <div class="left-chart-3-body">
              <span>{{ leftTxt3 }}</span>
            </div>
          </div>

          <div class="report-left-chart-4">
            <div class="left-chart-4-title">
              <span>{{ progressTitle.d }}</span>
            </div>
            <div class="left-chart-4-body">
              <div class="meeting-title">
                <span class="span1">报告日期</span>
                <span class="span2">报告简介</span>
              </div>
              <div class="meeting-body">
                <el-popover
                    v-for="(item, index) in meetingData"
                    :key="'meeting' + index"
                    placement="left"
                    popper-class="meeting-popover"
                    trigger="click">
                  <iframe
                      :src="'/meeting/' + item.url + '#toolbar=0'"
                      class="meeting-popover-pop"
                      height="100%"
                      width="200%"></iframe>
                  <div slot="reference" class="meeting-body-box">
                    <span class="span1">{{ item.date }}</span>
                    <span class="span2">{{ item.result }}</span>
                  </div>
                </el-popover>
              </div>
            </div>
          </div>
        </div>
        <!--    审核清单左    -->
        <div v-show="titleIndex === 3 && pageIndex === 0">
          <div class="report-left-chart-5">
            <div class="left-chart-5-title">
              <span>审核清单</span>
            </div>
            <div class="left-chart-5-body">
              <table class="body-table">
                <tr>
                  <th style="width: 100px">项目类别</th>
                  <th style="width: 100px">专业类别</th>
                  <th style="width: 100px">包含元素</th>
                  <th style="width: 100px">模型是否完成</th>
                </tr>
                <tr v-for="(item, index) in tableData2" :key="index">
                  <td v-if="index === 0" :rowspan="tableData2.length">
                    {{ item.project }}
                  </td>
                  <td
                      v-if="
                      index === 0 ||
                      index === 4 ||
                      index === 8 ||
                      index === 12 ||
                      index === 14 ||
                      index === 16
                    "
                      :rowspan="index < 12 ? 4 : 2"
                  >
                    {{ item.speciality }}
                  </td>
                  <td>{{ item.element }}</td>
                  <td>{{ item.model }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!--    地块分析左    -->
        <div v-show="titleIndex === 3 && pageIndex === 4">
          <div class="report-left-chart-6">
            <div class="left-chart-1-title">
              <span>{{ analysisTitle.a }}</span>
            </div>
            <div class="left-chart-1-body">
              <span>{{ leftTxt1 }}</span>
            </div>
          </div>

          <div class="report-left-chart-7">
            <div class="left-chart-2-title">
              <span>{{ analysisTitle.b }}</span>
            </div>
            <div class="left-chart-2-body">
              <span>{{ leftTxt2 }}</span>
            </div>
          </div>

          <div class="report-left-chart-8">
            <div class="left-chart-3-title">
              <span>{{ analysisTitle.c }}</span>
            </div>
            <div class="left-chart-3-body">
              <span>{{ leftTxt3 }}</span>
            </div>
          </div>

          <div class="report-left-chart-9">
            <div class="left-chart-4-title">
              <span>{{ analysisTitle.d }}</span>
            </div>
            <div class="left-chart-4-body">
              <span>{{ leftTxt4 }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 右固定图表 -->
      <div
          v-show="
          ((titleIndex === 1 && pageIndex === 0) ||
            (titleIndex === 3 && pageIndex === 4) ||
            (titleIndex === 3 && pageIndex === 0) ||
            (titleIndex === 2 && pageIndex === 1)) &&
          reportPlanName === '棪慧云创数智孪生汇报平台'
        "
          class="report-right-chart-bg"
      >
        <!--    平台总览右    -->
        <div v-show="titleIndex === 1&& pageIndex === 0">
          <!--    项目总览下拉框-公司    -->
          <div class="report-right-select-1">
            <span class="select-span-1">公司:</span>
            <el-select
                v-model="company"
                placeholder="林同棪国际"
                popper-class="select-dropdown1"
            >
              <el-option
                  v-for="item in companies"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!--    项目总览下拉框-年份    -->
          <div class="report-right-select-2">
            <span class="select-span-2">年度:</span>
            <el-select
                v-model="year"
                placeholder="2023"
                popper-class="select-dropdown1"
            >
              <el-option
                  v-for="item in years"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!--    项目总览道路列表    -->
          <div class="report-right-chart-1">
            <el-table
                :data="tableData1"
                :span-method="objectSpanMethod1"
                border
                class="right-chart-1-list"
                @cell-click="tableClick"
            >
              <el-table-column label="位置" prop="id" width="100">
              </el-table-column>
              <el-table-column label="道路名称" prop="name" width="200">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!--    应用分析右    -->
        <div v-show="titleIndex === 3 && pageIndex === 0">
          <!--    应用分析下拉框-道路    -->
          <div class="report-right-select-3">
            <span class="select-span-3">道路工程:</span>
            <el-select
                v-model="road"
                placeholder="A区"
                popper-class="select-dropdown1"
            >
              <el-option
                  v-for="item in roads"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <!--    应用分析图表    -->
          <div class="report-right-chart-2">
            <div class="right-chart-2-title">
              <span>审核清单</span>
            </div>
            <div class="right-chart-2-body">
              <table class="body-table">
                <tr>
                  <th style="width: 100px">模型精度</th>
                  <th style="width: 100px">是否达标</th>
                  <th style="width: 100px">元素信息</th>
                  <th style="width: 100px">信息录入情况</th>
                </tr>
                <tr v-for="(item, index) in tableData3" :key="index">
                  <td
                      v-if="
                      index === 0 ||
                      index === 4 ||
                      index === 8 ||
                      index === 12 ||
                      index === 14 ||
                      index === 16
                    "
                      :rowspan="index < 12 ? 4 : 2"
                  >
                    {{ item.accuracy }}
                  </td>
                  <td
                      v-if="
                      index === 0 ||
                      index === 4 ||
                      index === 8 ||
                      index === 12 ||
                      index === 14 ||
                      index === 16
                    "
                      :rowspan="index < 12 ? 4 : 2"
                  >
                    {{ item.whether }}
                  </td>
                  <td>{{ item.element }}</td>
                  <td>{{ item.enter }}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <!--    漫游展示    -->
        <div v-show="titleIndex === 2&& pageIndex === 1">
          <div class="birds-eye-view">
            <div class="view-north" @click="northView">正北</div>
            <div class="view-south" @click="southView">正南</div>
            <div class="view-west" @click="westView">正西</div>
            <div class="view-east" @click="eastView">正东</div>
          </div>
        </div>
        <!--    地块分析右    -->
        <div v-show="titleIndex === 3 && pageIndex === 4">
          <!--    项目总览道路列表    -->
          <div class="report-right-chart-3">
            <el-table
                :data="tableData4"
                border
                class="right-chart-1-list"
                @cell-click="tableClick"
            >
              <el-table-column label="xxxx" prop="id" width="160">
                <template slot-scope="scope">
                  <div :style="{ backgroundColor: getColor(scope.row.id) }">
                    &nbsp;
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="xxxx" prop="name" width="160">
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <!--   文本框   -->
      <div v-if="pageOne !== {}">
        <div
            v-for="(text, index) in pageOne.textLists"
            :id="text.id"
            :key="index"
            :style="text.class"
            class="report-page-label"
        >
          <div class="ql-editor" v-html="pageOne.textLists[index].text"></div>
          <!--          <div v-if="text.linkStart === -1" class="plan-popup-link-none">-->
          <!--            {{ text.text }}-->
          <!--          </div>-->
          <!--          <div v-else class="plan-popup-link">-->
          <!--            <span class="plan-popup-link-first">{{-->
          <!--                getSubstringAfter(text.text, text.linkStart)-->
          <!--              }}</span>-->
          <!--            <el-popover popper-class="meeting-popover2" trigger="click">-->
          <!--              <iframe-->
          <!--                  class="meeting-popover-pop"-->
          <!--                  :style="{-->
          <!--                  width: text.linkCss.width,-->
          <!--                  height: text.linkCss.height,-->
          <!--                }"-->
          <!--                  :src="text.url"-->
          <!--              ></iframe>-->
          <!--              <el-link-->
          <!--                  slot="reference"-->
          <!--                  type="primary"-->
          <!--                  :style="{ fontSize: text.class.fontSize }"-->
          <!--              >{{ text.linkstr }}-->
          <!--              </el-link>-->
          <!--            </el-popover>-->

          <!--            <span>{{-->
          <!--                getSubstringBefore(text.text, text.linkstr, text.linkStart)-->
          <!--              }}</span>-->
          <!--          </div>-->
        </div>
      </div>
      <!--   图表   -->
      <div v-show="pageOne !== {}">
        <div
            v-for="chart in pageOne.chartLists"
            :id="chart.id"
            :key="chart.id"
            :style="chart.class"
            class="report-chart"
        ></div>
      </div>
      <!--   形状   -->
      <div v-show="pageOne !== {}">
        <div
            v-for="shape in pageOne.shapeLists"
            :id="shape.id"
            :key="shape.id"
            :style="shape.class"
            class="report-shape"
        ></div>
      </div>
      <!--  图片    -->
      <div v-if="pageOne !== {}">
        <div
            v-for="image in pageOne.imageLists"
            :key="image.id"
            :style="image.class"
        ></div>
      </div>

      <!--   导览   -->
      <div v-show="showAnimationImage" class="report-animation-image-bg">
        <div v-for="(imgOne, index) in imgS" :key="index">
          <div class="report-animation-image" @click="playAnimation(imgOne)">
            <img :src="imgOne.src" alt="动画" class="report-animation-img"/>
            <span class="report-animation-name">{{ imgOne.name }}</span>
          </div>
        </div>
      </div>
      <!--   图层树     -->
      <div v-show="showInfoTree" class="report-tree-box">
        <div class="report-tree-top">
          <div class="report-tree-name">
            <span>图层树:</span>
          </div>
          <i class="report-tree-close ri-close-line" @click="showInfoTree = false"></i>
        </div>
        <el-tree ref="infoTree" :data="infoTrees"
                 :default-expanded-keys="['ProjectTree_Root']"
                 :expand-on-click-node="true"
                 :props="defaultProps"
                 class="report-info-tree"
                 node-key="iD" show-checkbox
                 @check="checkInfoTree">
        </el-tree>
      </div>
      <!--   快速选线   -->
      <div v-show="showFastLine" class="report-fast-line">
        <div class="fast-line-input">
          <div class="fast-line-title">
            <span>输入二维坐标</span>
          </div>
          <div class="fast-line-body1">
            <span>x:</span><input v-model="coordinate_x" type="text"/>
            <span>y:</span><input v-model="coordinate_y" type="text"/>
            <button @click="addCoordinate">添加坐标</button>
          </div>
          <div class="fast-line-coordinate">
            <span>数组长度:{{ coordinates.length }}</span>
            <ul v-for="(coordinate, index) in coordinates" :key="index">
              <li>
                <span>{{ index + 1 }}:</span>
                <span class="txt">{{ coordinate }}</span>
                <button @click="deleteCoordinate(index)">删除</button>
              </li>
            </ul>
          </div>
        </div>
        <div class="fast-line-input">
          <div class="fast-line-title">
            <span>输入三维坐标</span>
            <button @click="addPolygon_flag = false">输入</button>
            <button @click="addPolygon_flag = true">点选</button>
          </div>
          <div class="fast-line-body2">
            <span>x:</span
            ><input
              v-model="coordinate3_x"
              :disabled="addPolygon_flag"
              type="text"
          />
            <br/>
            <span>y:</span
            ><input
              v-model="coordinate3_y"
              :disabled="addPolygon_flag"
              type="text"
          />
            <br/>
            <span>z:</span
            ><input
              v-model="coordinate3_z"
              :disabled="addPolygon_flag"
              type="text"
          />
            <button :disabled="addPolygon_flag" @click="addCoordinate3">
              添加坐标
            </button>
          </div>
          <div class="fast-line-coordinate">
            <span>数组长度:{{ coordinates3.length }}</span>
            <ul v-for="(coordinate3, index) in coordinates3" :key="index">
              <li>
                <span>{{ index + 1 }}:</span>
                <span class="txt3">{{ coordinate3 }}</span>
                <button @click="deleteCoordinate3(index)">删除</button>
              </li>
            </ul>
          </div>
        </div>
        <div class="fast-line-input">
          <div class="fast-line-title">
            <span>输出三维维坐标</span>
          </div>
          <div class="fast-line-btn">
            <button @click="clearPolygonAll">重置</button>
            <button @click="countCoordinate3s()">生成坐标</button>
            <button @click="addPolygon_1()">生成图形</button>
            <button @click="clearPolygon()">清除图形</button>
          </div>
          <div class="fast-line-coordinate">
            <ul v-for="(ps, index) in coordinates3_output" :key="index">
              <li>{{ index + 1 }}:</li>
              <li v-for="(p, index) in ps" :key="index">
                <span>{{ p }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--   车辆   -->
      <div v-show="showVehicleMenu" class="report-vehicle-box">
        <div class="vehicle-menu-1">
          <div class="vehicle-menu-title">车辆样式</div>
          <div>
            <div>
              <span class="menu-title-name">车辆类型:</span>
              <el-select v-model="assetPath" placeholder="请选择">
                <el-option
                    v-for="item in assetPaths"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <br/>
            <div>
              <span class="menu-title-name">车辆颜色:</span>
              <el-select v-model="carColor" placeholder="请选择">
                <el-option
                    v-for="item in carColors"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
          </div>
        </div>
        <div class="vehicle-menu-1">
          <div class="vehicle-menu-title">车辆样式</div>
          <div>
            <span class="menu-title-name">视角跟随:</span>
            <el-switch
                v-model="followEnable"
                active-color="#13ce66"
                inactive-color="#ff4949"
                style="margin-left: 10px"
            >
            </el-switch>
          </div>
          <br/>
          <div>
            <span class="menu-title-name">跟随距离:</span>
            <el-select v-model="followDistance" placeholder="请选择">
              <el-option
                  v-for="item in followDistances"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              >
              </el-option>
            </el-select>
            <br/>
          </div>
        </div>
        <div class="vehicle-menu-1">
          <div>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="addVehicleFlag = !addVehicleFlag"
            >添加车辆
            </el-button>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="clearVehicle()"
            >删除车辆
            </el-button>
          </div>
          <div>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="setVehicle()"
            >添加路径
            </el-button>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="moveVehicle()"
            >开始移动
            </el-button>
          </div>
          <div>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="hideOrShowPolyline()"
            >路径显隐
            </el-button>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="outFollowEnable()"
            >？定位？
            </el-button>
          </div>
        </div>
      </div>
      <!--   标签   -->
      <div v-if="showMarker" class="report-marker-box">
        <div class="marker-menu-1">
          <div class="marker-menu-title">标签样式</div>
          <div>
            <div>
              <span style="padding: 3px 10px; font-size: 20px">标签文字:</span>
              <el-input
                  v-model="markerName"
                  class="input-with-select"
                  placeholder="请输入文字"
                  style="width: 100px"
              >
              </el-input>
            </div>
            <br/>
            <div>
              <span style="padding: 3px 10px; font-size: 20px">标签颜色:</span>
              <el-select
                  v-model="markerBgColor"
                  placeholder="请选择"
                  style="font-size: 30px"
              >
                <el-option
                    v-for="item in markerBgColors"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <br/>
            <div>
              <span style="padding: 3px 10px; font-size: 20px">文字颜色:</span>
              <el-select
                  v-model="markerFontColor"
                  placeholder="请选择"
                  style="font-size: 30px"
              >
                <el-option
                    v-for="item in markerFontColors"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <br/>
            <div>
              <span style="padding: 3px 10px; font-size: 20px">字体大小:</span>
              <el-select
                  v-model="markerFontSize"
                  placeholder="请选择"
                  style="font-size: 30px"
              >
                <el-option
                    v-for="item in markerFontSizes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <br/>
            <div>
              <span style="padding: 3px 10px; font-size: 20px">字体轮廓:</span>
              <el-select
                  v-model="markerFontOutlineSize"
                  placeholder="请选择"
                  style="font-size: 30px"
              >
                <el-option
                    v-for="item in markerFontOutlineSizes"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <br/>
            <div>
              <span
                  style="
                  padding: 3px;
                  margin-left: 10px;
                  margin-right: 5px;
                  font-size: 20px;
                "
              >牵引线显隐:</span
              >
              <el-switch
                  v-model="markerShowLine"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  style="margin-right: 10px"
              >
              </el-switch>
            </div>
            <br/>
            <div>
              <span
                  style="margin-left: 10px; margin-right: 10px; font-size: 20px"
              >牵引线宽度:</span
              >
              <el-input
                  v-model="markerLineWidth"
                  style="width: 70px"
              ></el-input>
              <br/>
              <br/>
              <span
                  style="margin-left: 10px; margin-right: 10px; font-size: 20px"
              >牵引线高度:</span
              >
              <el-input
                  v-model="markerLineHeight"
                  style="width: 70px"
              ></el-input>
            </div>
          </div>
        </div>
        <div class="marker-menu-1">
          <div>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="addMarkerFlag = true"
            >添加标签
            </el-button>
            <el-button
                :plain="true"
                class="vehicle-menu-btn"
                @click="clearMarker()"
            >清空标签
            </el-button>
          </div>
        </div>
        <div class="marker-menu-1">
          <div>
            <div>
              <div>
                <table
                    v-if="markerLists.length !== 0"
                    class="marker-list-table"
                >
                  <tr>
                    <th style="width: 90px">ID</th>
                    <th style="width: 90px">文字</th>
                    <th></th>
                    <th></th>
                  </tr>
                  <tr v-for="(marker, index) in markerLists" :key="index">
                    <td @click="focusMarker(marker.id)">{{ marker.id }}</td>
                    <td>{{ marker.text }}</td>
                    <!--                    <td><i class="marker-icon ri-at-line" @click="focusMarker(marker.id)"></i></td>-->
                    <!--                    <td><i class="marker-icon ri-pencil-line" @click="editMarker(marker,index)"></i></td>-->
                    <td>
                      <i
                          class="marker-icon ri-delete-bin-5-fill"
                          @click="deleteMarker(marker.id, index)"
                      ></i>
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!--   视频   -->
      <div id="player" class="report-player"></div>
      <div v-if="false" class="report-page-turn-only">
        <div class="page-turn-btn">
          <i class="page-turn-icon ri-mouse-line" @click="backToAll"></i>
        </div>
      </div>
      <!--   翻页   -->
      <div v-if="true" class="report-page-turn">
        <div style="display: flex">
          <div class="page-turn-btn">
            <i
                class="page-turn-icon ri-arrow-left-s-line"
                @click="lastPage"
            ></i>
          </div>
          <div class="page-turn-btn">
            <i class="page-turn-icon ri-mouse-line" @click="backToAll"></i>
          </div>
          <div class="page-turn-btn">
            <i
                class="page-turn-icon ri-arrow-right-s-line"
                @click="nextPage"
            ></i>
          </div>
        </div>
      </div>

      <!--   分析工具弹窗  v-if="showAnalysisTools==='Sunshine'" -->
      <sun-Shine v-if="showAnalysisTools==='Sunshine'"
                 ref="sunshinePopupRef"
                 @close-popup="showAnalysisTools=null">
      </sun-Shine>

      <terrain-slope v-if="showAnalysisTools==='TerrainSlope'"
                     ref="terrainSlopePopupRef"
                     @close-popup="showAnalysisTools=null">
      </terrain-slope>

      <contour-line v-if="showAnalysisTools==='ContourLine'"
                    ref="contourLinePopupRef"
                    @close-popup="showAnalysisTools=null">
      </contour-line>

      <flood-fill v-if="showAnalysisTools==='FloodFill'"
                  ref="floodFillPopupRef"
                  @close-popup="showAnalysisTools=null"
                  @select-floodFill="startFloodFill_flag=true">
      </flood-fill>

      <fluid-simulation v-if="showAnalysisTools==='FluidSimulation'"
                        ref="fluidSimulationPopupRef"
                        @close-popup="showAnalysisTools=null"
                        @select-fluidSimulation="startFluid_flag=true">
      </fluid-simulation>

      <sky-line v-if="showAnalysisTools==='SkyLine'"
                ref="skyLinePopupRef"
                @close-popup="showAnalysisTools=null">
      </sky-line>

      <inter-visibility v-if="showAnalysisTools==='InterVisibility'"
                        ref="interVisibilityPopupRef"
                        @close-popup="showAnalysisTools=null">
      </inter-visibility>

      <view-dome v-if="showAnalysisTools==='ViewDome'"
                 ref="viewDomePopupRef"
                 @close-popup="showAnalysisTools=null">
      </view-dome>

      <view-shed v-if="showAnalysisTools==='ViewShed'"
                 ref="viewShedPopupRef"
                 @close-popup="showAnalysisTools=null">
      </view-shed>
    </div>
  </div>
</template>
<style lang="scss">
@import "../css/reportPlan";
</style>
<script>
/* eslint-disable */
import "remixicon/fonts/remixicon.css";
import * as ac_api from "../../public/ac.min";
import * as echarts from "echarts";
import axios from "axios";
import polylinePopup from "./polyline/polylinePopup.vue";
import {nextTick} from "vue";
import TerrainSlope from "@/views/AnalysisTools/terrainSlope.vue";
import FloodFill from "@/views/AnalysisTools/floodFill.vue";
import SunShine from "@/views/AnalysisTools/sunShine.vue";
import SkyLine from "@/views/AnalysisTools/skyLine.vue";
import ContourLine from "@/views/AnalysisTools/contourLine.vue";
import ViewDome from "@/views/AnalysisTools/viewDome.vue";
import InterVisibility from "@/views/AnalysisTools/interVisibility.vue";
import ViewShed from "@/views/AnalysisTools/viewShed.vue";
import FluidSimulation from "@/views/AnalysisTools/fluidSimulation.vue";
import initApiData from "@/js/initApiData"
import reportTemplate from "@/js/reportTemplate";

export default {
  name: "ReportPlan",
  components: {
    FluidSimulation, ViewShed, InterVisibility, ViewDome, ContourLine, SkyLine, SunShine, FloodFill, TerrainSlope,
    polylinePopup,
  },
  data() {
    return {
      //
      showWhite: true,
      //
      reportStyle: 'blue',
      //
      polylineIds: [],
      polygonIds: [],
      textLists: [],
      //测量工具组件弹窗
      showMeasureTools: false,
      //标签
      markerIds: [],
      markerBtnName: "添加标签:关",
      markerName: "标签",
      markerNum: 0,
      markerImage: "",
      markerShowLine: true,
      markerLineWidth: 1,
      markerLineHeight: 100,
      addMarkerFlag: false,
      markerBgColor: "#ffffff",
      markerFontColor: "#000000",
      markerFontSize: 24,
      markerFontOutlineSize: 0,
      markerFontSizes: [
        {
          value: "20",
          label: "20",
        },
        {
          value: "22",
          label: "22",
        },
        {
          value: "24",
          label: "24",
        },
        {
          value: "26",
          label: "26",
        },
        {
          value: "28",
          label: "28",
        },
        {
          value: "30",
          label: "30",
        },
        {
          value: "32",
          label: "32",
        },
        {
          value: "34",
          label: "34",
        },
        {
          value: "36",
          label: "36",
        },
        {
          value: "38",
          label: "38",
        },
        {
          value: "40",
          label: "40",
        },
      ],
      markerFontOutlineSizes: [
        {
          value: 0,
          label: 0,
        },
        {
          value: 1,
          label: 1,
        },
        {
          value: 2,
          label: 2,
        },
        {
          value: 3,
          label: 3,
        },
        {
          value: 4,
          label: 4,
        },
      ],
      markerBgColors: [
        {
          value: "#000000",
          label: "黑色",
        },
        {
          value: "#ffffff",
          label: "白色",
        },
        {
          value: "#FF0000",
          label: "红色",
        },
        {
          value: "#00BFFF",
          label: "蓝色",
        },
        {
          value: "#00FF04",
          label: "绿色",
        },
        {
          value: "#EEFF00",
          label: "黄色",
        },
      ],
      markerFontColors: [
        {
          value: "#000000",
          label: "黑色",
        },
        {
          value: "#FF0000",
          label: "红色",
        },
        {
          value: "#00BFFF",
          label: "蓝色",
        },
        {
          value: "#00FF04",
          label: "绿色",
        },
        {
          value: "#EEFF00",
          label: "黄色",
        },
      ],
      showMarker: false,
      //模型对比
      multiViewportModeFlag: false,
      //车辆
      showVehicleMenu: false,
      assetPath: "",
      assetPaths: [
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/SUV_01",
          label: "SUV",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/公交车_01",
          label: "公交车",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/重型货车_01",
          label: "重型货车",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/出租车_01",
          label: "出租车",
        },
        {
          value: "/JC_CustomAssets/VehicleLibrary/Exhibition/轿车_07",
          label: "轿车",
        },
      ],
      carColor: "",
      carColors: [
        {
          value: 0,
          label: "随机",
        },
        {
          value: 2,
          label: "灰白色",
        },
        {
          value: 3,
          label: "灰色",
        },
        {
          value: 4,
          label: "蓝色",
        },
        {
          value: 5,
          label: "青色",
        },
        {
          value: 6,
          label: "白色",
        },
        {
          value: 7,
          label: "棕色",
        },
        {
          value: 1,
          label: "黑色",
        },
      ],
      followEnable: false,
      followDistance: 5,
      followDistances: [
        {
          value: 5,
          label: "5m",
        },
        {
          value: 10,
          label: "10m",
        },
        {
          value: 20,
          label: "20m",
        },
        {
          value: 50,
          label: "50m",
        },
      ],
      addVehicleFlag: false,
      setVehicleFlag: false,
      points: [],
      showPolyline: true,
      //快速选线
      addPolygon_flag: false,
      coordinate_x: "",
      coordinate_y: "",
      coordinate3_x: "",
      coordinate3_y: "",
      coordinate3_z: "",
      // 初始化空数组用于存储二维坐标
      coordinates: [],
      // 初始化空数组用于存储三维坐标
      coordinates3: [],
      //存放计算每个面的坐标的集合
      coordinates3_output: [],
      //南纪门
      showNanJiMen: false,
      //寸滩
      showCunTan: false,
      //地块分析左边的信息
      show24_leftAll: false,
      //地块分析的图例
      tableData4: [
        {
          id: "1",
          name: "居住用地",
        },
        {
          id: "2",
          name: "住商混合用地",
        },
        {
          id: "3",
          name: "行政办公用地",
        },
        {
          id: "4",
          name: "中小学用地",
        },
        {
          id: "5",
          name: "商业服务业设施用地",
        },
        {
          id: "6",
          name: "商住混合用地",
        },
        {
          id: "7",
          name: "公用设施用地",
        },
        {
          id: "8",
          name: "公园绿地",
        },
        {
          id: "9",
          name: "防护绿地",
        },
        {
          id: "10",
          name: "区域交通设施用地",
        },
        {
          id: "11",
          name: "水域",
        },
        {
          id: "12",
          name: "农林用地",
        },
      ],
      //地块分析的文本
      analysisTxt: [
        {
          a: "A-10地块隶属寸滩国际新城国际消费中心板块，片区容积率约为0.85。该地块长约500m，宽约100m，建设高度约为40m。",
          b: "交通枢纽及商业混合用地",
          c: "4.31公顷，即65亩",
          d: "充分彰显长江董金岸线山水气质，打造国内首个世界级内河邮轮母港TOD综合体",
        },
        {
          a: "A-2地块隶属寸滩国际新城国际交往中心板块，片区容积率约为0.85。该地块长约200m，宽约130m，建设高度约为40m。",
          b: "文化设施用地及酒店用地",
          c: "2.43公顷，即37亩",
          d: "打造寸滩交流中心和精品商务酒店，将其打造为可举办国际峰会、大型商务年会、宴会等活动的高能级交往中心。",
        },
      ],
      //南纪门左图表的标题名
      nanJiMenTitle: {
        a: "",
        b: "",
        c: "",
        d: "",
      },
      //地块分析左图表的标题名
      analysisTitle: {
        a: "基本概况",
        b: "用地性质",
        c: "用地面积",
        d: "打造意向",
      },
      //项目概况左图表的标题名
      progressTitle: {
        a: "项目概况",
        b: "项目设计进度",
        c: "项目合同/质量情况",
        d: "项目最近周报/例会",
      },
      //会议进度
      meetingData: [
        {
          date: "2022-08",
          result: "科技大道第一次周例会会议纪要",
          url: "20220808.pdf",
        },
        {
          date: "2022-08",
          result: "科技大道第二次周例会会议纪要",
          url: "20220808.pdf",
        },
      ],
      //项目概况的左图表的进度
      progressData: {
        totalAmount: 200,
        detailArr: [
          {
            type: "施工图进度",
            amount: 0,
          },
          {
            type: "初设进度",
            amount: 75,
          },
          {
            type: "方案进度",
            amount: 100,
          },
        ],
      },
      //应用分析右图表
      tableData3: [
        {
          accuracy:
              "1、地形等高距离宜为1m；\n" +
              "2、相交重要现状道路标高、横坡、纵坡、横断面等重要信息内容，用三维模型表达",
          whether: "已包含",
          element: "场地名称信息",
          enter: "已包含",
        },
        {
          accuracy:
              "1、地形等高距离宜为1m；\n" +
              "2、相交重要现状道路标高、横坡、纵坡、横断面等重要信息内容，用三维模型表达",
          whether: "已包含",
          element: "场地高程信息",
          enter: "已包含",
        },
        {
          accuracy:
              "1、地形等高距离宜为1m；\n" +
              "2、相交重要现状道路标高、横坡、纵坡、横断面等重要信息内容，用三维模型表达",
          whether: "已包含",
          element: "场地坐标信息",
          enter: "已包含",
        },
        {
          accuracy:
              "1、地形等高距离宜为1m；\n" +
              "2、相交重要现状道路标高、横坡、纵坡、横断面等重要信息内容，用三维模型表达",
          whether: "已包含",
          element: "—",
          enter: "—",
        },
        {
          accuracy:
              "1、路基长度长度高度、分层厚度、填挖方数据、横坡等；\n" +
              "2、特殊路基长宽高、分层厚度、填挖数数据、横坡等；\n" +
              "3、沟、井、池等构筑物尺寸；\n" +
              "4、建模几何精度20mm。",
          whether: "已包含",
          element: "路面超高及加宽",
          enter: "已包含",
        },
        {
          accuracy:
              "1、路基长度长度高度、分层厚度、填挖方数据、横坡等；\n" +
              "2、特殊路基长宽高、分层厚度、填挖数数据、横坡等；\n" +
              "3、沟、井、池等构筑物尺寸；\n" +
              "4、建模几何精度20mm。",
          whether: "已包含",
          element: "规格/材料",
          enter: "已包含",
        },
        {
          accuracy:
              "1、路基长度长度高度、分层厚度、填挖方数据、横坡等；\n" +
              "2、特殊路基长宽高、分层厚度、填挖数数据、横坡等；\n" +
              "3、沟、井、池等构筑物尺寸；\n" +
              "4、建模几何精度20mm。",
          whether: "已包含",
          element: "路基处理措施",
          enter: "已包含",
        },
        {
          accuracy:
              "1、路基长度长度高度、分层厚度、填挖方数据、横坡等；\n" +
              "2、特殊路基长宽高、分层厚度、填挖数数据、横坡等；\n" +
              "3、沟、井、池等构筑物尺寸；\n" +
              "4、建模几何精度20mm。",
          whether: "已包含",
          element: "水利参数",
          enter: "未包含",
        },
        {
          accuracy:
              "1、机动车道路面结构层尺寸、厚度、标高，路拱横坡、净空、空间位置、长度、宽度、高度、侧平石尺寸、超高加宽等\n" +
              "2、非机动车道路面结构尺寸、路拱横坡、标高；\n" +
              "3、人行道路面结构尺寸、路拱横坡、标高；\n" +
              "4、路缘石、路平石、路边石轮廓尺寸及位置；\n" +
              "5、建模位置及几何精度10mm。",
          whether: "已包含",
          element: "—",
          enter: "—",
        },
        {
          accuracy:
              "1、机动车道路面结构层尺寸、厚度、标高，路拱横坡、净空、空间位置、长度、宽度、高度、侧平石尺寸、超高加宽等\n" +
              "2、非机动车道路面结构尺寸、路拱横坡、标高；\n" +
              "3、人行道路面结构尺寸、路拱横坡、标高；\n" +
              "4、路缘石、路平石、路边石轮廓尺寸及位置；\n" +
              "5、建模位置及几何精度10mm。",
          whether: "已包含",
          element: "—",
          enter: "—",
        },
        {
          accuracy:
              "1、机动车道路面结构层尺寸、厚度、标高，路拱横坡、净空、空间位置、长度、宽度、高度、侧平石尺寸、超高加宽等\n" +
              "2、非机动车道路面结构尺寸、路拱横坡、标高；\n" +
              "3、人行道路面结构尺寸、路拱横坡、标高；\n" +
              "4、路缘石、路平石、路边石轮廓尺寸及位置；\n" +
              "5、建模位置及几何精度10mm。",
          whether: "已包含",
          element: "—",
          enter: "—",
        },
        {
          accuracy:
              "1、机动车道路面结构层尺寸、厚度、标高，路拱横坡、净空、空间位置、长度、宽度、高度、侧平石尺寸、超高加宽等\n" +
              "2、非机动车道路面结构尺寸、路拱横坡、标高；\n" +
              "3、人行道路面结构尺寸、路拱横坡、标高；\n" +
              "4、路缘石、路平石、路边石轮廓尺寸及位置；\n" +
              "5、建模位置及几何精度10mm。",
          whether: "已包含",
          element: "—",
          enter: "—",
        },
        {
          accuracy:
              "1、标志标线布设得尺寸、位置\n" +
              "2、监控及信号灯位置\n" +
              "3、防护设施的长度\n" +
              "4、照明管线的布置位置、埋深、长度,接线井的轮廓尺寸\n" +
              "5、建模位置及几何精度20mm",
          whether: "已包含",
          element: "颜色",
          enter: "已包含",
        },
        {
          accuracy:
              "1、标志标线布设得尺寸、位置\n" +
              "2、监控及信号灯位置\n" +
              "3、防护设施的长度\n" +
              "4、照明管线的布置位置、埋深、长度,接线井的轮廓尺寸\n" +
              "5、建模位置及几何精度20mm",
          whether: "已包含",
          element: "—",
          enter: "—",
        },
        {
          accuracy:
              "1、附属设施建模及几何精度20mm；\n" + "2、树池的轮廓尺寸、信息",
          whether: "已包含",
          element: "树池规格信息",
          enter: "已包含",
        },
        {
          accuracy:
              "1、附属设施建模及几何精度20mm；\n" + "2、树池的轮廓尺寸、信息",
          whether: "已包含",
          element: "材料信息",
          enter: "已包含",
        },
        {
          accuracy:
              "1、增加支护结构基础深度；\n" + "2、建模位置及几何精度2mm。",
          whether: "已包含",
          element: "铺装信息",
          enter: "已包含",
        },
        {
          accuracy:
              "1、增加支护结构基础深度；\n" + "2、建模位置及几何精度2mm。",
          whether: "已包含",
          element: "水利参数",
          enter: "未包含",
        },
      ],
      //应用分析左图表
      tableData2: [
        {
          project: "道路工程",
          speciality: "道路场地",
          element: "场地位置",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "道路场地",
          element: "场地地质",
          model: "未包含",
        },
        {
          project: "道路工程",
          speciality: "道路场地",
          element: "场地周边环境",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "道路场地",
          element: "现状管线",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "路基",
          element: "基础",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "路基",
          element: "支挡结构",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "路基",
          element: "边坡",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "路基",
          element: "边沟",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "路面",
          element: "面层",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "路面",
          element: "基层",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "路面",
          element: "垫层",
          model: "未包含",
        },
        {
          project: "道路工程",
          speciality: "路面",
          element: "粘结层",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "交通安全与服务设施",
          element: "交通标志",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "交通安全与服务设施",
          element: "交通标线",
          model: "已包含",
        },
        {
          project: "道路工程",
          speciality: "其它",
          element: "取、弃土场",
          model: "未包含",
        },
        {
          project: "道路工程",
          speciality: "其它",
          element: "涵洞",
          model: "不含",
        },
        {
          project: "道路工程",
          speciality: "支护结构",
          element: "—",
          model: "—",
        },
        {
          project: "道路工程",
          speciality: "支护结构",
          element: "—",
          model: "—",
        },
      ],
      //平台总览右图表
      tableData1: [
        {
          id: "地面",
          name: "AH1路",
        },
        {
          id: "地面",
          name: "AH2路",
        },
        {
          id: "地面",
          name: "AH3路",
        },
        {
          id: "地面",
          name: "AH4路",
        },
        {
          id: "地面",
          name: "AH5路",
        },
        {
          id: "地面",
          name: "AZ1路",
        },
        {
          id: "地面",
          name: "AZ2路",
        },
        {
          id: "地面",
          name: "AZ3路",
        },
        {
          id: "地面",
          name: "AZ4路",
        },
        {
          id: "地面",
          name: "AZ5路",
        },
        {
          id: "地下",
          name: "A匝道",
        },
        {
          id: "地下",
          name: "B匝道",
        },
        {
          id: "地下",
          name: "C匝道",
        },
        {
          id: "地下",
          name: "D匝道",
        },
        {
          id: "地下",
          name: "车库联络道",
        },
      ],
      //平台总览左图表
      txtDetails: [
        {
          id: "项目概况",
          projectOverview:
              "重庆寸滩国际邮轮母港片区城市路网工程-A区路网工程-车库联络道为城市支路，设计速度20Km/h，断面宽度9.5m，单向两车道。道路长度1.42Km，建安费51536万元。",
          designSchedule:
              "方案进度：100%\n" + "初设进度：75%\n" + "施工图进度：0%\n",
          situationQuality: "暂无设计质量问题，无设计变更。\n",
        },
        {
          id: "AH1路",
          projectOverview:
              "重庆寸滩国际邮轮母港片区城市路网工程-A区路网工程-AH1路道路等级为城市支路，设计速度20Km/h，断面宽度16m，双向两车道。道路长度0.61Km，建安费1424万元。\n",
          designSchedule:
              "设计单位: 林同棪国际工程咨询(中国)有限公司已完成AH1路路网工程施工图设计。",
          situationQuality: "暂无设计质量问题，无设计变更。",
        },
        {
          id: "AZ1路",
          projectOverview:
              "重庆寸滩国际邮轮母港片区城市路网工程-A区路网工程-AZ1路道路等级为城市次干路，设计速度40Km/h，断面宽度24m，双向四车道。道路长度0.65Km，建安费8134万元。\n",
          designSchedule:
              "设计单位: 林同棪国际工程咨询(中国)有限公司已完成AZ1路路网工程施工图设计。\n",
          situationQuality: "暂无设计质量问题，无设计变更。\n",
        },
      ],
      //平台总览左图表取值
      leftTxt1: "",
      leftTxt2: "",
      leftTxt3: "",
      leftTxt4: "",
      showLeftTxt2: false,
      //公司
      company: "",
      companies: [
        {
          value: "1",
          label: "林同棪国际",
        },
        {
          value: "2",
          label: "赛博科技",
        },
        {
          value: "3",
          label: "长城设计院",
        },
        {
          value: "4",
          label: "北京国道通",
        },
      ],
      //年份
      year: "",
      years: [
        {
          value: "2021",
          label: "2021年",
        },
        {
          value: "2022",
          label: "2022年",
        },
        {
          value: "2023",
          label: "2023年",
        },
        {
          value: "2024",
          label: "2024年",
        },
      ],
      //道路工程
      road: "",
      roads: [
        {
          value: "1",
          label: "A区",
        },
        {
          value: "2",
          label: "B区",
        },
        {
          value: "3",
          label: "C区",
        },
        {
          value: "4",
          label: "D区",
        },
      ],

      //快速选线
      showFastLine: false,
      //图层临时变量
      showInfoTree: false,
      infoTrees: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      //导览临时变量,开关
      imgS: [],
      showAnimationImage: false,
      //剖切开关
      VolumeClip_flag: false,
      PlaneClip_flag: false,
      //时间
      sliderTime: 0,
      time: "",
      marks: {
        20: '早',
        45: '中',
        80: '晚',
      },
      //隐藏开关
      hide_object_flag: false,
      hide_menu: "隐藏:关",
      /*
         隐藏操作，只针对模型操作，自定义物体无效
          */
      hide_object_ids: [],
      hide_object_ids2: [],
      hide_object_num_max: 100,
      hide_object_num: 0,
      hide_object_num2: 0,
      layerId_hide: "",

      //工具栏的开关
      showLeftTools1: false,
      //分析工具
      showAnalysisTools: null,
      //流体
      startFluid_flag: false,
      //水淹
      startFloodFill_flag: false,
      //0光影1天气2剖切3测量4分析
      showLeftTools2: [
        {
          name: "光影",
          show: false,
          icon: "ri-haze-2-line",
          type: "0-0",
          children: [],
        },
        {
          name: "天气",
          show: false,
          icon: "ri-temp-hot-line",
          type: "1-0",
          children: [
            {name: "晴天", icon: "ri-sun-line", type: "1-1"},
            {name: "雨天", icon: "ri-showers-line", type: "1-2"},
            {name: "雪天", icon: "ri-snowy-line", type: "1-3"},
          ],
        },
        {
          name: "剖切",
          show: false,
          icon: "ri-instance-line",
          type: "2-0",
          children: [
            {name: "体剖", icon: "ri-box-2-line", type: "2-1"},
            {name: "竖剖", icon: "ri-map-2-fill", type: "2-2"},
            {name: "清除", icon: "ri-brush-3-fill", type: "2-3"},
          ],
        },
        {
          name: "测量",
          show: false,
          icon: "ri-ruler-line",
          type: "3-0",
          children: [
            {name: "坐标", icon: "ri-map-pin-line", type: "3-1"},
            {name: "直线", icon: "ri-space", type: "3-2"},
            {name: "水平", icon: "ri-git-commit-line", type: "3-3"},
            {name: "垂直", icon: "ri-ruler-2-line", type: "3-4"},
            {name: "平面", icon: "ri-shape-line", type: "3-5"},
            {name: "地面", icon: "ri-shape-fill", type: "3-6"},
            {name: "清除", icon: "ri-brush-3-fill", type: "3-7"},
          ],
        },
        {
          name: "分析",
          show: false,
          icon: "ri-bar-chart-grouped-line",
          type: "4-0",
          children: [
            {name: "天际线", icon: "ri-home-gear-line", type: "4-1"},
            {name: "视域", icon: "ri-home-wifi-line", type: "4-2"},
            {name: "水淹", icon: "ri-anchor-fill", type: "4-3"},
            {name: "通视", icon: "ri-building-3-line", type: "4-4"},
            {name: "开敞度", icon: "ri-community-line", type: "4-5"},
            {name: "日照", icon: "ri-home-heart-line", type: "4-6"},
            {name: "坡度向", icon: "ri-sketching", type: "4-7"},
            {name: "等高线", icon: "ri-funds-line", type: "4-8"},
            {name: "流体", icon: "ri-anchor-fill", type: "4-9"},
            {name: "清除", icon: "ri-funds-line", type: "4-10"},
          ],
        },
        {
          name: "导览",
          show: false,
          icon: "ri-movie-2-line",
          type: "5-0",
          children: [],
        },
        {
          name: "图层树",
          show: false,
          icon: "ri-node-tree",
          type: "6-0",
          children: [],
        },
        {
          name: "选线",
          show: false,
          icon: "ri-quill-pen-line",
          type: "7-0",
          children: [],
        },
        {
          name: "隐藏:关",
          show: false,
          icon: "ri-wifi-off-line",
          type: "8-0",
          children: [],
        },
        {
          name: "车辆",
          show: false,
          icon: "ri-car-line",
          type: "9-0",
          children: [],
        },
        {
          name: "标签",
          show: false,
          icon: "ri-flag-2-line",
          type: "10-0",
          children: [],
        },
        {
          name: "恢复",
          show: false,
          icon: "ri-loop-right-fill",
          type: "11-0",
          children: [],
        },
      ],
      //工具栏开关按钮的切换样式
      leftToolsIcon: "report-leftTools-btn-icon ri-arrow-right-s-fill",

      //标题选中的样式
      titleClassBlue: {
        color: "#ffffff",
        backgroundColor: "rgb(13, 37, 79, 1)",
      },
      //点击page用的数组位置
      pageIndex: "",
      titleIndex: "",
      pageName: "",
      pageOne: {},

      //标题对象
      reportPlanName: "棪慧云创数智孪生汇报平台",
      // reportPlanName: "林同棪数智咨询服务平台",
      // reportPlanName: "汇报展示",
      //渲染用的主体
      titleLists: [],
      //临时用
      markerLists: [],
      reportTour: [],
      //模板
      titleLists001: reportTemplate.titleLists001,
      //汇报列表
      showReportList: false,
      reportLists: [],
      api: null,
    };
  },
  methods: {
    /*
    * 顶部方法
    * */
    //切换汇报风格
    changeReportStyle(command) {
      for (let i = 0; i < this.titleLists.length; i++) {
        this.titleLists[i].showTitlePage = false;
        this.titleLists[i].titleClass = "";
        this.titleLists[i].iconClass = "body-title-icon ri-arrow-drop-right-line";
      }
      switch (command) {
        case "blue" :
          console.log("blue report");
          this.reportStyle = command
          break;
        case "green" :
          console.log("green report");
          this.reportStyle = command
          break;
        case "white":
          console.log("white report");
          this.reportStyle = command
          break;
        default:
          break;
      }
    },
    //汇报页面点击标题响应事件
    changeTitle(indexF) {
      //停止应用分析里面的模型交互
      this.stopModel();
      //删除页面标签
      this.changePageDelMarker();
      //从页面到标题
      if (this.titleIndex !== "" && this.pageIndex !== "") {
        this.titleLists[this.titleIndex].titleClass = "";
        this.titleLists[this.titleIndex].showTitlePage = false;
        if (this.reportStyle === 'blue') {
          this.titleLists[indexF].titleClass = this.titleClassBlue;
        }
        this.titleLists[indexF].showTitlePage = true;
        this.pageIndex = "";
        this.titleIndex = indexF;
      } else if (this.titleIndex !== "" && this.pageIndex === "") {
        //从标题到标题
        this.titleLists[this.titleIndex].titleClass = "";
        this.titleLists[this.titleIndex].showTitlePage = false;
        if (this.reportStyle === 'blue') {
          this.titleLists[indexF].titleClass = this.titleClassBlue;
        }
        this.titleLists[indexF].showTitlePage = true;
        this.titleIndex = indexF;
      } else {
        //第一次点击
        if (this.reportStyle === 'blue') {
          this.titleLists[indexF].titleClass = this.titleClassBlue;
        }
        this.titleLists[indexF].showTitlePage = true;
        this.titleIndex = indexF;
      }
    },
    //汇报页面点击页面响应事件
    async changePage(page, indexF, indexC) {
      this.stopModel();
      this.stopAnalysisTools();
      this.changePageDelMarker();
      //切换科技蓝的样式
      if (this.titleIndex !== "" && (this.titleIndex !== indexF || this.pageIndex !== indexC)) {
        this.titleLists[this.titleIndex].titleClass = "";
        if (this.reportStyle === 'blue') {
          this.titleLists[indexF].titleClass = this.titleClassBlue;
        }
      }
      //传递参数
      this.pageOne = page;
      this.pageIndex = indexC;
      this.titleIndex = indexF;
      //处理图表
      nextTick(() => {
        this.setChartInit(page.chartLists);
      });
      //作用是什么?
      this.titleLists.push();
      //处理分析工具
      // if (page.apiLists !== []) {
      //   for (let i = 0; i < page.apiLists.length; i++) {
      //     if (page.apiLists[i].api === 'FluidSimulation') {
      //       await __g.fluid.add(page.apiLists[i].object);
      //       __g.fluid.focus(page.apiLists[i].object.id, 30, 2);
      //       __g.fluid.continueSource(page.apiLists[i].data);
      //     }
      //   }
      // }
      //处理相机位置、图层和图层节点、标签、线、面
      this.setCameraSaved(page.pageView);
      // this.setLayerSaved(page.pageTrees);
      await this.setNodes(page.pageTrees);
      console.log(page.pageTrees)
      await this.setMarker(page.markerLists);
      await this.setPolyline(page.polylineLists);
      await this.setPolygon(page.polygonLists);
      if (this.reportPlanName === "棪慧云创数智孪生汇报平台") {
        //项目概况
        if (indexF === 1) {
          this.leftTxt1 = this.txtDetails[0].projectOverview;
          this.leftTxt2 = this.txtDetails[0].designSchedule;
          this.leftTxt3 = this.txtDetails[0].situationQuality;
          __g.camera.set(-804864.74998, 3353760.443516, 1396.939375, -55.239174, -90.749641, 3)
        }
        //行车视角
        else if (indexF === 2 && indexC === 2) {
          // __g.camera.playAnimation(3)
          // let wayVehicle = [
          //   {
          //     "timeStamp": 0,
          //     "coordinate": [-815515.2000000001, 3348901.44, 260.85810546875],
          //     "gear": 3,
          //   }, {
          //     "timeStamp": 2,
          //     "coordinate": [-815515.4400000001, 3348888.96, 260.85812500000003],
          //     "gear": 3,
          //   }, {
          //     "timeStamp": 4,
          //     "coordinate": [-815515.04, 3348867.52, 260.8580859375],
          //     "gear": 3,
          //   }, {
          //     "timeStamp": 6,
          //     "coordinate": [-815515.2000000001, 3348843.52, 260.85810546875],
          //     "gear": 3,
          //   }, {
          //     "timeStamp": 8,
          //     "coordinate": [-815515.12, 3348822.08, 260.85810546875],
          //     "gear": 3,
          //   },
          // ]
          // let wayVehicle2 = {
          //   "id": "0car",
          //   "wayPoints": wayVehicle
          // }
          // __g.vehicle.setWayPoint(wayVehicle2);
          // let data = {"id": "0car", "timeStamp": 0};
          // __g.vehicle.focus('0car', true, 5, 3, [-10, 0, 0], [34, 0, 0]);
          // __g.vehicle.start(data)
          // setTimeout(() => {
          //   __g.vehicle.focus('0car', false, 5, 3, [-10, 0, 0], [34, 0, 0])
          // }, 8000)
        }
        //人行视角
        else if (indexF === 2 && indexC === 3) {
          __g.camera.playAnimation(4);
        }
        //项目总览
        else if (indexF === 2 && indexC === 0) {
          __g.camera.set(-804425.888472, 3353191.964766, 3481.03125, -65.295509, -105.359566, 3);
        }
        /*
        * 模型对比？有问题，一个实例不行，需要两个实例，同一个实例的api操作是同步的
        * 需要在explorer里选择展示窗口，1234，来实现对比效果
        * */
        else if (indexF === 3 && indexC === 6) {
          this.multiViewportModeFlag = true;
          //视口布局类型，取值范围：[1~7]
          let viewportMode = 1;
          //可选参数，激活后视口边框线的颜色
          let lineColor = "#DEA309";
          //可选参数，激活后视口边框线的宽度，单位：像素px
          let lineSize = 2;
          __g.misc.enterMultiViewportMode(viewportMode, lineColor, lineSize);
          //多视口模式下设置相机是否同步
          __g.misc.setMultiviewportInteractSync(true);
          __g.tileLayer.setViewportVisible("85B1E2394E9C771251CB51BB3CF5736C", 1);
          // __g.infoTree.hide("A2CB69564E148F481EA264A493DDBFE3");
          // __g.infoTree.hide("DA8BD04F4531CF05F02BE8AB83E8C533");
        }
        //土方调配
        else if (indexF === 3 && indexC === 1) {
          __g.camera.set(-804503.897813, 3353938.086094, 2757.633125, -69.265289, -112.296326, 3);
          __g.infoTree.show("DA8BD04F4531CF05F02BE8AB83E8C533");
        }
        //剖切查看
        else if (indexF === 3 && indexC === 3) {
          let bbox = [-805096.24, 3354356.46, 213.43];
          let rotation = [-35.623344, -23.775368, 0];
          let isShowBBox = false;
          let isEditable = false;
          __g.tools.startPlaneClip(bbox, rotation, isShowBBox, isEditable);
          __g.settings.setRenderedCursorVisible(false);
          __g.camera.set(-805086.459297, 3354335.5975, 223.378203, -40.024628, -107.671684, 3);
        }
        //地块分析
        else if (indexF === 3 && indexC === 4) {
          __g.camera.set(-804917.176367, 3354024.049063, 1683.109844, -70.512909, -113.174332, 3);
          __g.infoTree.show("A2CB69564E148F481EA264A493DDBFE3");
          __g.infoTree.hide("98C08F624DD0DFE2C1AC588953F6AD8C");
          this.leftTxt1 = "";
          this.leftTxt2 = "";
          this.leftTxt3 = "";
          this.leftTxt4 = "";
        }
        //冲突分析
        else if (indexF === 3 && indexC === 2) {
          __g.camera.set(-805162.41875, 3354533.433125, 253.607969, -40.669418, -139.49115, 3);
          __g.infoTree.show("B64495B947A29FBE02E663880C29F550");
        }
      }
    },

    // 截取链接前文字
    getSubstringAfter(str, index) {
      if (index !== -1) {
        if (str) {
          return str.substring(0, index);
        }
      }
      return str;
    },
    // 截取链接后文字
    getSubstringBefore(str, str2, index) {
      if (index !== -1) {
        if (str) {
          return str.slice(index + str2.length);
        }
      }
      return "";
    },

    async setMarker(markerLists) {
      if (markerLists && markerLists.length !== 0) {
        for (let i = 0; i < markerLists.length; i++) {
          this.markerIds.push(markerLists[i].id);
        }
        await __g.marker.add(markerLists);
      }
    },
    changePageDelMarker() {
      if (this.markerIds.length > 0) {
        __g.marker.delete(this.markerIds);
      }
      this.markerIds = [];
    },

    async setPolygon(polygonLists) {
      console.log(this.polygonIds);
      //之前不存在
      if (this.polygonIds.length === 0) {
        console.log("no polygon");
        if (polygonLists.length > 0) {
          console.log("have polygon");
          console.log("add polygon");
          for (let i = 0; i < polygonLists.length; i++) {
            this.polygonIds.push(polygonLists[i].id);
          }
          await __g.polygon.add(polygonLists);
        } else {
          console.log("no polygon");
        }
      } else {
        //之前存在
        console.log("had polygon");
        if (polygonLists.length === 0) {
          console.log("del all polygon");
          __g.polygon.delete(this.polygonIds);
          this.polygonIds = [];
        } else {
          console.log("compare old and new");
          let compareResults = this.compareIds(this.polygonIds, polygonLists);
          __g.polygon.delete(compareResults.missingElements);
          await __g.polygon.add(compareResults.newElements);
          this.polygonIds = [];
          for (let i = 0; i < polygonLists.length; i++) {
            this.polygonIds.push(polygonLists[i].id);
          }
        }
      }
    },
    async setPolyline(polylineLists) {
      console.log(this.polylineIds);
      //之前不存在
      if (this.polylineIds.length === 0) {
        console.log("no polyline");
        if (polylineLists.length > 0) {
          console.log("have polyline");
          console.log("add polyline");
          for (let i = 0; i < polylineLists.length; i++) {
            this.polylineIds.push(polylineLists[i].id);
          }
          await __g.polyline.add(polylineLists);
        } else {
          console.log("no polyline");
        }
      } else {
        //之前存在
        console.log("had polyline");
        if (polylineLists.length === 0) {
          console.log("del all polyline");
          __g.polyline.delete(this.polylineIds);
          this.polylineIds = [];
        } else {
          console.log("compare old and new");
          let compareResults = this.compareIds(this.polylineIds, polylineLists);
          __g.polyline.delete(compareResults.missingElements);
          await __g.polyline.add(compareResults.newElements);
          this.polylineIds = [];
          for (let i = 0; i < polylineLists.length; i++) {
            this.polylineIds.push(polylineLists[i].id);
          }
        }
      }
    },
    //比较前后页面的线面数组的id
    compareIds(oldArray, newArray) {
      const existingElements = [];
      const newElements = [];
      const missingElements = [];

      for (let i = 0; i < oldArray.length; i++) {
        if (newArray.includes(oldArray[i])) {
          existingElements.push(oldArray[i]);
        } else {
          missingElements.push(oldArray[i]);
        }
      }

      for (let i = 0; i < newArray.length; i++) {
        if (!oldArray.includes(newArray[i])) {
          newElements.push(newArray[i]);
        }
      }

      return {existingElements, newElements, missingElements,};
    },

    //图表初始化
    setChartInit(chartLists) {
      console.log(chartLists);
      if (chartLists.length > 0) {
        for (let i = 0; i < chartLists.length; i++) {
          let dom = document.getElementById(chartLists[i].id);
          const progressChart = echarts.init(dom);
          progressChart.setOption(chartLists[i].options);
        }
      }
    },

    //设置page视角，并在点击页面时，重绘相机位置
    setCameraSaved(pageView) {
      if (pageView.x !== 0 && pageView.y !== 0) {
        __g.camera.set(pageView.x, pageView.y, pageView.z, pageView.pitch, pageView.yaw, 2);
      }
    },

    //设置page图层,并在点击页面时，重绘图层
    // setLayerSaved(pageTrees) {
    //   if (pageTrees.length === 0) {
    //     // console.log("No pageLayer specified")
    //     // __g.infoTree.show("ProjectTree_Root");
    //     // __g.infoTree.hide('DA8BD04F4531CF05F02BE8AB83E8C533')
    //     // __g.infoTree.hide('A2CB69564E148F481EA264A493DDBFE3')
    //   } else {
    //     __g.infoTree.hide("ProjectTree_Root");
    //     __g.infoTree.show(pageTrees);
    //   }
    // },
    //设置之前选择的节点
    // setNodes(pageTrees) {
    //   if (pageTrees.length === 0) {
    //     this.$refs.tree.setCheckedNodes(this.infoTrees);
    //     // console.log("setCheckedNodes all")
    //   } else {
    //     this.$refs.tree.setCheckedKeys(pageTrees);
    //     console.log(pageTrees);
    //     console.log("setCheckedNodes choose");
    //   }
    // },
    async setNodes(pageTrees) {
      if (pageTrees.length === 0) {
        console.log("keep infoTree last one page");
      } else {
        let lastTree = this.$refs.infoTree.getCheckedKeys()
        console.log(lastTree, pageTrees)
        let objTree = this.findUniqueStrings(lastTree, pageTrees)
        await this.hideInfoTreeIds(objTree[0])
        await this.showInfoTreeIds(objTree[1])
        console.log(objTree);
        console.log("setCheckedNodes choose");
      }
    },
    findUniqueStrings(lastTree, pageTrees) {
      const oldTree = new Set(lastTree);
      const newTree = new Set(pageTrees);
      let hide = [];
      let flag1 = false
      let flag2 = false
      for (const item of oldTree) {
        if (!newTree.has(item)) {
          hide.push(item);
        }
        if (item === 'ProjectTree_Root') {
          flag1 = true
        }
      }
      const show = [];
      for (const item of newTree) {
        if (!oldTree.has(item)) {
          show.push(item);
        }
        if (item === 'ProjectTree_Root') {
          flag2 = true
        }
      }
      if (flag2) {
        //全显示
      } else {
        if (flag1) {
          hide = hide.filter(item => item !== 'ProjectTree_Root');
        }
      }
      return [hide, show];
    },
    //切换方案时初始化各个变量
    newPage() {
      this.pageIndex = "";
      this.titleIndex = "";
      this.pageOne = {};
    },

    /*
    标题 应用分析里的方法 停止
    */
    stopModel() {
      //冲突
      this.recoverConflict();
      //地块分析
      this.recoverLandUse();
      //剖切查看
      this.clearClip();
      //车库隐藏恢复
      this.recoverUnderground();
      //停止导览
      __g.camera.stopAnimation();
      //项目概况的文字
      this.showLeftTxt2 = false;
      //模型对比
      if (this.multiViewportModeFlag) {
        this.recoverContrast();
      }
      //土方调配
      this.recoverEarthwork();
    },
    //地下车库
    recoverUnderground() {
      __g.tileLayer.showAllActors("F8334DBC41DD0191E549E583DF25C867");
      __g.tileLayer.showAllActors("9DF87C2441BF29C324F197A7F62EDF1F");
    },
    //土方调配
    recoverEarthwork() {
      __g.infoTree.hide("DA8BD04F4531CF05F02BE8AB83E8C533");
    },
    //模型对比
    recoverContrast() {
      //退出多视口??????暂时有问题，待修改，退出时会显示ui界面和指南针
      __g.misc.exitMultiViewportMode(function () {
        __g.settings.setCampassVisible(false);
      });
    },
    //地块分析
    recoverLandUse() {
      __g.infoTree.hide("A2CB69564E148F481EA264A493DDBFE3");
      __g.infoTree.show("98C08F624DD0DFE2C1AC588953F6AD8C");
      this.show24_leftAll = false;
    },
    //冲突分析
    recoverConflict() {
      __g.infoTree.hide("B64495B947A29FBE02E663880C29F550", function () {
        // console.log('冲突分析1ok')
      });
    },

    /*
    模型的点击事件
    */
    //键盘交互事件绑定
    onKeyDown(event) {
      // 检测按下的键
      console.log(event.key);
      if (event.key === "Escape") {
        this.clearClip();
        __g.tools.stopMeasurement();
        this.stopAnalysisTools();
      }
      if (event.key === "ArrowRight" || event.key === "ArrowDown" || event.key === " ") {
        this.nextPage();
      }
      if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
        this.lastPage();
      }
      //回车隐藏
      if (this.hide_object_flag && event.key === "Enter") {
        //执行隐藏
        this.hideActor();
      }
      //右ctrl恢复上次隐藏
      if (this.hide_object_flag && event.key === "Control") {
        //恢复上次隐藏
        this.showActorsLast();
      }
    },
    onMouseDown(event) {
      // console.log(event.which)
      if (event.which === 3 && this.setVehicleFlag) {
        this.setVehicleFlag = false;
        console.log("路径完成");
      }
    },

    /*
    左侧菜单的点击事件
    */
    //左侧工具栏的展开方法
    showLeftToolsF1() {
      //子菜单全关，前5个
      this.showLeftTools2.forEach((v) => {
        v.show = false;
      });
      //父级开关切换
      this.showLeftTools1 = !this.showLeftTools1;
      //改展开收起的图表样式
      if (this.showLeftTools1) {
        this.leftToolsIcon = "report-leftTools-btn-icon ri-arrow-left-s-fill";
      } else {
        this.leftToolsIcon = "report-leftTools-btn-icon ri-arrow-right-s-fill";
      }
      //关闭子项的弹窗，后6个
      this.showMarker = false;
      this.showVehicleMenu = false;
      this.showAnimationImage = false;
      this.showInfoTree = false;
      this.showFastLine = false;
      this.hide_object_flag = false;
    },
    //子菜单的展开方法
    showLeftToolsF2(item) {
      this.showLeftTools2.forEach((v) => {
        v.show = v.type === item.type && !item.show;
      });
      if (item.type === "5-0") {
        this.getAnimationList();
      } else if (item.type === "6-0") {
        this.showInfoTree = true;
      } else if (item.type === "7-0") {
        this.fastLine();
      } else if (item.type === "8-0") {
        this.hideActorMenu();
      } else if (item.type === "9-0") {
        this.vehicleMenu();
      } else if (item.type === "10-0") {
        this.markerMenu();
      } else if (item.type === "11-0") {
        this.recoverPage();
      } else {
        this.showInfoTree = false;
        this.showAnimationImage = false;
        this.showFastLine = false;
        this.showVehicleMenu = false;
        this.showMarker = false;
        this.hide_object_flag = false;
      }
    },
    // 子菜单各个实现功能，前5个
    setLeftTools(val) {
      switch (val) {
        case "1-1":
          this.sunny();
          break;
        case "1-2":
          this.rain(0.2, 0.2);
          break;
        case "1-3":
          this.snow(0.2, 0);
          break;
        case "2-1":
          this.setVolumeClip();
          break;
        case "2-2":
          this.setPlaneClip();
          break;
        case "2-3":
          this.clearClip();
          break;
        case "3-1":
          this.setMeasurement(1);
          break;
        case "3-2":
          this.setMeasurement(2);
          break;
        case "3-3":
          this.setMeasurement(3);
          break;
        case "3-4":
          this.setMeasurement(4);
          break;
        case "3-5":
          this.setMeasurement(5);
          break;
        case "3-6":
          this.setMeasurement(6);
          break;
        case "3-7":
          this.setMeasurement(0);
          break;
        case "4-1":
          this.setAnalysisTools(1);
          break;
        case "4-2":
          this.setAnalysisTools(2);
          break;
        case "4-3":
          this.setAnalysisTools(3);
          break;
        case "4-4":
          this.setAnalysisTools(4);
          break;
        case "4-5":
          this.setAnalysisTools(5);
          break;
        case "4-6":
          this.setAnalysisTools(6);
          break;
        case "4-7":
          this.setAnalysisTools(7);
          break;
        case "4-8":
          this.setAnalysisTools(8);
          break;
        case "4-9":
          this.setAnalysisTools(9);
          break;
        case "4-10":
          this.setAnalysisTools(0);
          break;
        default:
          break;
      }
    },

    //汇报页面的左侧功能列表的恢复按钮
    recoverPage() {
      //关闭前5项
      this.showLeftTools2.forEach((v) => {
        v.show = false;
      });
      //切换天气晴朗
      this.sunny();
      //关闭剖切
      this.clearClip();
      //退出测量模式
      __g.tools.stopMeasurement();
      //关闭分析工具
      this.stopAnalysisTools();

      //关闭导览
      this.showAnimationImage = false;
      __g.camera.stopAnimation();
      //关闭图层树
      this.showInfoTree = false;
      //关闭选线
      this.showFastLine = false;
      this.addPolygon_flag = false; //选线
      this.clearPolygonAll();
      //清除隐藏
      this.hide_object_flag = false;
      this.showLeftTools2[8].name = "隐藏:关";
      this.clearHideActorMenu();
      //关闭车辆
      this.showVehicleMenu = false;
      this.addVehicleFlag = false; //车辆
      this.setVehicleFlag = false;
      //关闭标签
      this.showMarker = false;
      this.addMarkerFlag = false; //标签
    },
    //时间
    setTime() {
      let date = new Date(); //当前时间
      /*
      * getMonth()返回0-11
      * getFullYear()返回完整年份
      * */
      switch (this.sliderTime) {
        case 0:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 1, 0, false);
          break;
        case 5:
          console.log(5)
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 3, 0, false);
          break;
        case 10:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 5, 0, false);
          break;
        case 15:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 6, 0, false);
          break;
        case 20:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 7, 0, false);
          break;
        case 25:
          console.log(25)
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 8, 0, false);
          break;
        case 30:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 9, 0, false);
          break;
        case 35:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 10, 0, false);
          break;
        case 40:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 11, 0, false);
          break;
        case 45:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 12, 0, false);
          break;
        case 50:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 13, 0, false);
          break;
        case 55:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 14, 0, false);
          break;
        case 60:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 15, 0, false);
          break;
        case 65:
          console.log(65)
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 16, 0, false);
          break;
        case 70:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 17, 0, false);
          break;
        case 75:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 18, 0, false);
          break;
        case 80:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 19, 0, false);
          break;
        case 85:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 20, 0, false);
          break;
        case 90:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 21, 0, false);
          break;
        case 95:
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 22, 0, false);
          break;
        case 100:
          console.log(100)
          __g.weather.setDateTime(date.getFullYear(), date.getMonth() + 1, date.getDate(), 0, 0, false);
          break;
        default:
          break;
      }
    },
    getSliderTime() {
      let date = new Date(); //当前时间
      let hour = date.getHours();
      switch (hour) {
        case 1:
        case 2:
          this.sliderTime = 0
          break;
        case 3:
        case 4:
          this.sliderTime = 5
          break;
        case 5:
          this.sliderTime = 10
          break;
        case 6:
          this.sliderTime = 15
          break;
        case 7:
          this.sliderTime = 20
          break;
        case 8:
          this.sliderTime = 25
          break;
        case 9:
          this.sliderTime = 30
          break;
        case 10:
          this.sliderTime = 35
          break;
        case 11:
          this.sliderTime = 40
          break;
        case 12:
          this.sliderTime = 45
          break;
        case 13:
          this.sliderTime = 50
          break;
        case 14:
          this.sliderTime = 55
          break;
        case 15:
          this.sliderTime = 60
          break;
        case 16:
          this.sliderTime = 65
          break;
        case 17:
          this.sliderTime = 70
          break;
        case 18:
          this.sliderTime = 75
          break;
        case 19:
          this.sliderTime = 80
          break;
        case 20:
          this.sliderTime = 85
          break;
        case 21:
          this.sliderTime = 90
          break;
        case 22:
          this.sliderTime = 95
          break;
        case 23:
        case 0:
          this.sliderTime = 100
          break;
        default:
          break;
      }
    },
    //天气
    setWeather(weather) {
      switch (true) {
        case weather.includes("雾"):
          this.whichFog(weather)
          break;
        case weather.includes("雨"):
          this.whichRain(weather)
          break;
        case weather.includes("雪"):
          this.whichSnow(weather)
          break;
        case weather.includes("晴"):
          console.log("晴")
          this.sunny()
          break;
        case weather.includes("风"):
          console.log("风")
          this.windy()
          break;
        default:
          console.log("???")
          this.normalWeather()
          break;
      }
    },
    whichFog(weather) {
      this.isRainOrSnow()
      switch (weather) {
        case "轻雾":
          console.log("轻雾")
          this.fog(0.5, 0.5, 50)
          break;
        case "大雾":
          console.log("大雾")
          this.fog(1, 0.45, 50)
          break;
        case "浓雾":
          console.log("浓雾")
          this.fog(1.5, 0.4, 30)
          break;
        case "强雾":
          console.log("强雾")
          this.fog(2, 0.35, 10)
          break;
        default:
          console.log("???")
          this.fog(0.75, 0.5, 75)
          break;
      }
    },
    whichRain(weather) {
      switch (weather) {
        case "小雨":
          console.log("小雨")
          this.rain(0.2, 0.2)
          break;
        case "中雨":
          console.log("中雨")
          this.rain(0.5, 0.2)
          break;
        case "大雨":
          console.log("大雨")
          this.rain(0.8, 0.2)
          break;
        case "暴雨":
          console.log("暴雨")
          this.rain(1, 0.5)
          break;
        default:
          console.log("???")
          this.rain(0.4, 0.2)
          break;
      }
    },
    whichSnow(weather) {
      switch (weather) {
        case "小雪":
          console.log("小雪")
          this.snow(0.2, 0)
          break;
        case "中雪":
          console.log("中雪")
          this.snow(0.4, 0.2)
          break;
        case "大雪":
          console.log("大雪")
          this.snow(0.7, 0.3)
          break;
        default:
          console.log("???")
          this.snow(0.3, 0.1)
          break;
      }
    },
    setAmbientLight(intensity) {
      __g.weather.setAmbientLightIntensity(intensity)
    },
    setCloud(density, thickness, height) {
      __g.weather.setCloudDensity(density)
      __g.weather.setCloudThickness(thickness)
      __g.weather.setCloudHeight(height)
    },
    setSun(intensity, size, temperature) {
      __g.weather.setSunIntensity(intensity)
      __g.weather.setSunSize(size)
      __g.weather.setTemperature(temperature)
    },
    fog(fogDensity, fogHeightFalloff, fogStartDistance) {
      this.isRainOrSnow()
      let fogColor = [1, 1, 1, 0]
      let fogOpacity = 1
      __g.weather.setFogParam(fogDensity, fogColor, fogHeightFalloff, fogStartDistance, fogOpacity)
    },
    rain(strength, speed) {
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      let raindropSize = 0.5;
      let rainColor = [0.5, 0.5, 0.5, 0.1]
      let alignCamera = 0.1
      let overcastStrength = 0.5
      __g.weather.setRainParam(strength, speed, raindropSize, rainColor, alignCamera, overcastStrength)
    },
    snow(strength, snowflakeSize) {
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      let speed = 0
      let snowColor = [1, 1, 1, 1]
      let alignCamera = 0.1
      __g.weather.setSnowParam(strength, speed, snowflakeSize, snowColor, alignCamera)
    },
    sunny() {
      this.isRainOrSnow()
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      this.setAmbientLight(2)
      this.setCloud(0.5, 0.3, 5)
      this.setSun(10, 2, 5500)
    },
    windy() {
      this.isRainOrSnow()
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      this.setAmbientLight(2)
      this.setCloud(1, 0.5, 15)
      this.setSun(7, 1, 5500)
    },
    normalWeather() {
      this.isRainOrSnow()
      __g.weather.setFogParam(0, [1, 1, 1, 0], 0, 10000, 0)
      this.setAmbientLight(1)
      this.setCloud(1, 0.4, 10)
      this.setSun(5, 1, 5500)
    },
    isRainOrSnow() {
      let data = {}
      __g.weather.getParams().then(
          (result) => {
            data = result;
          }
      )
      if (data.rainsnow !== 0) {
        __g.weather.disableRainSnow()
      }
    },

    //剖切
    setVolumeClip() {
      this.showLeftToolsF2(2);
      this.VolumeClip_flag = true;
      console.log("选择剖切位置");
    },
    volumeClip_event(x, y, z) {
      //bbox的对角线的两个点的位置，通过延展x,y,z的两两夹面，让两点相交形成空间体bbox
      let bbox = [x - 20, y - 20, z - 20, x + 20, y + 20, z + 20];
      //0：正向剖切，1：反向剖切
      let direction = 0;
      // 剖切时是否显示剖切范围的包围盒,默认false
      let isShowBBox = false;
      // 剖切时是否可交互编辑，默认false
      let isEditable = true;
      /*
      rotation的三个参数:
      Pitch：上下旋转角度，，欧拉角向量的X轴,取值范围：[-90~+90]
      Yaw：左右旋转角度，，欧拉角向量的Y轴,取值范围：[-180~+180]
      Roll：翻滚角度，欧拉角向量的Z轴
       */
      let rotation = [0, 0, 0];
      __g.tools.startVolumeClip(
          bbox,
          direction,
          isShowBBox,
          isEditable,
          rotation,
          function () {
            console.log("开始体剖");
          }
      );
      __g.settings.setRenderedCursorVisible(false, function () {
        console.log("ok");
      });
      this.VolumeClip_flag = false;
    },
    stopVolumeClip() {
      __g.tools.stopVolumeClip();
    },
    //竖剖
    setPlaneClip() {
      this.showLeftToolsF2(2);
      this.PlaneClip_flag = true;
      console.log("选择竖剖位置");
    },
    async planeClip_event(x, y, z) {
      let bbox = [x, y, z];
      let camera = await __g.camera.get();
      let rotation = [camera.pitch, camera.yaw + 90, 0];
      let isShowBBox = false;
      let isEditable = true;
      __g.tools.startPlaneClip(bbox, rotation, isShowBBox, isEditable);
      __g.settings.setRenderedCursorVisible(false, function () {
        console.log("ok");
      });
      this.PlaneClip_flag = false;
    },
    stopPlaneClip() {
      __g.tools.stopPlaneClip(function () {
        // console.log("退出竖剖")
      });
      __g.settings.setRenderedCursorVisible(false); //处理异常bug
    },
    //清除所有剖切
    clearClip() {
      this.VolumeClip_flag = false;
      this.PlaneClip_flag = false;
      this.stopVolumeClip();
      this.stopPlaneClip();
    },
    //测量
    setMeasurement(type) {
      this.showLeftToolsF2(3);
      let options = {
        pointSize: 20.0,
        textSize: 20.0,
        textColor: "#FFB6C1",
        pointColor: [0, 0, 1, 0.3],
        lineColor: "#1E90FF",
        areaColor: [0, 1, 0, 0.3], //红绿蓝透明度，取值范围：[0~1.0]，按RGBA颜色值比例缩小255倍
        showCoordinateText: false, //是否显示坐标测量的文本
      };
      switch (type) {
        case 1:
          __g.tools.setMeasurement(1, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式1");
          });
          break;
        case 2:
          __g.tools.setMeasurement(2, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式2");
          });
          break;
        case 3:
          __g.tools.setMeasurement(3, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式3");
          });
          break;
        case 4:
          __g.tools.setMeasurement(4, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式4");
          });
          break;
        case 5:
          __g.tools.setMeasurement(5, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式5");
          });
          break;
        case 6:
          __g.tools.setMeasurement(6, options);
          __g.tools.startMeasurement(function () {
            console.log("测量模式6");
          });
          break;
        case 0:
          __g.tools.stopMeasurement(function () {
            console.log("退出测量模式");
          });
          break;
        default:
          break;
      }
      __g.settings.setRenderedCursorVisible(false, function () {
        console.log("ok"); //修复bug
      });
    },
    setAnalysisTools(command) {
      this.showLeftToolsF2(4);
      console.log(command);
      switch (command) {
        case 1:
          this.showAnalysisTools = 'SkyLine'
          // this.startSkyline();
          break;
        case 2:
          this.showAnalysisTools = 'ViewShed'
          break;
        case 3:
          this.showAnalysisTools = 'FloodFill'
          // this.startFloodFill_flag = true;
          break;
        case 4:
          this.showAnalysisTools = 'InterVisibility'
          // this.startVisiblity();
          break;
        case 5:
          this.showAnalysisTools = 'ViewDome'
          // this.startViewDome();
          break;
        case 6:
          this.showAnalysisTools = 'Sunshine'
          // this.startSunshine();
          break;
        case 7:
          this.showAnalysisTools = 'TerrainSlope'
          // this.startTerrainSlope();
          break;
        case 8:
          this.showAnalysisTools = 'ContourLine'
          // this.startContourLine();
          break;
        case 9:
          this.showAnalysisTools = 'FluidSimulation'
          break;
        case 0:
          this.showAnalysisTools = null
          this.stopAnalysisTools();
          break;
        default:
          break;
      }
      console.log(this.showAnalysisTools)
    },
    stopAnalysisTools() {
      __g.tools.stopSkylineAnalysis(); //天际线
      __g.tools.stopSunshineAnalysis(); //日照分析
      this.stopViewshedAnalysis(); //视域分析
      __g.tools.stopContourLineAnalysis(); //等高线
      __g.floodFill.clear(); //水淹
      __g.fluid.clear(); //水淹
      __g.tools.stopVisiblityAnalysis(); //通视分析
      __g.tools.stopViewDomeAnalysis(); //开敞度
      __g.tools.stopTerrainSlopeAnalysis(); //坡度坡向
      __g.tools.stopFloodFill(); //水淹
    },
    stopViewshedAnalysis() {
      __g.tools.stopViewshedAnalysis();
    },

    async getAnimationList() {
      this.imgS = [];
      //获取所有导览列表
      let videos = await __g.camera.getAnimationList();
      let images = [];
      for (let i = 0; i < videos.data.length; i++) {
        //把导览名字取出来
        images[i] = JSON.stringify(videos.data[i].name).replace(/["']/g, "");
        //获取base64字符串
        __g.camera.getAnimationImage(images[i]).then((result) => {
          // 创建图像元素
          let img = {
            index: "",
            name: "",
            src: "",
          };
          // 设置src的图片
          img.src = "data:image/jpeg;base64," + result.image;
          img.name = images[i];
          img.index = i;
          //添加到页面的容器中
          this.imgS.push(img);
        });
      }
      console.log(this.imgS);
      this.showAnimationImage = !this.showAnimationImage;
      this.showInfoTree = false;
      this.showFastLine = false;
      this.showVehicleMenu = false;
      this.showMarker = false;
    },
    playAnimation(imgOne) {
      __g.camera.playAnimation(imgOne.index, function () {
        console.log(imgOne.name);
      });
    },
    stopAnimation() {
      __g.camera.stopAnimation();
    },
    //图层树
    async getTree() {
      //获取图层树的信息
      let trees = await __g.infoTree.get();
      console.log(trees);
      this.infoTrees = trees.infotree;
      let index;
      let index1;
      let currentItem;
      while (this.infoTrees.length > 1) {
        let arr1 = JSON.parse(JSON.stringify(this.infoTrees));
        arr1.forEach((currentItem) => {
          // 思想：从最末级向上生成树
          if (
              !this.infoTrees.some((item) => {
                return item.parentIndex === currentItem.index;
              })
          ) {
            // 找当前项在arr数组中是否存在子节点，如果当前项不存在子节点
            index = this.infoTrees.findIndex((item, index) => {
              // 找当前项的父节点在arr数组中的索引
              return item.index === currentItem.parentIndex;
            });
            index1 = this.infoTrees.findIndex((item, index) => {
              // 找当前项在arr数组中的索引
              return item.index === currentItem.index;
            });
            if (index !== -1) {
              // 找到当前项对应的父节点了，并拿到对应的父节点的数组索引了
              if (!this.infoTrees[index].children) {
                this.infoTrees[index].children = [];
              }
              this.infoTrees[index].children.push(this.infoTrees[index1]);
              this.infoTrees.splice(index1, 1); // 在arr中删除当前项
            }
          }
        });
      }
      console.log(JSON.parse(JSON.stringify(this.infoTrees)));
      this.infoTrees.splice(0, 0, {iD: 'plant', name: '植物', type: 'plant', visiblity: true});
      this.showInfoTree = !this.showInfoTree;
      this.showAnimationImage = false;
      this.showFastLine = false;
      this.showVehicleMenu = false;
      this.showMarker = false;
    },
    //图层树的切换
    async getInfoTree() {
      //获取图层树的信息
      let trees = await __g.infoTree.get();
      console.log(trees);
      this.infoTrees = trees.infotree;
      let index;
      let index1;
      let currentItem;
      while (this.infoTrees.length > 1) {
        let arr1 = JSON.parse(JSON.stringify(this.infoTrees));
        arr1.forEach((currentItem) => {
          // 思想：从最末级向上生成树
          if (
              !this.infoTrees.some((item) => {
                return item.parentIndex === currentItem.index;
              })
          ) {
            // 找当前项在arr数组中是否存在子节点，如果当前项不存在子节点
            index = this.infoTrees.findIndex((item, index) => {
              // 找当前项的父节点在arr数组中的索引
              return item.index === currentItem.parentIndex;
            });
            index1 = this.infoTrees.findIndex((item, index) => {
              // 找当前项在arr数组中的索引
              return item.index === currentItem.index;
            });
            if (index !== -1) {
              // 找到当前项对应的父节点了，并拿到对应的父节点的数组索引了
              if (!this.infoTrees[index].children) {
                this.infoTrees[index].children = [];
              }
              this.infoTrees[index].children.push(this.infoTrees[index1]);
              this.infoTrees.splice(index1, 1); // 在arr中删除当前项
            }
          }
        });
      }
      console.log(JSON.parse(JSON.stringify(this.infoTrees)));
      this.infoTrees.splice(0, 0, {iD: 'plant', name: '植物', type: 'plant', visiblity: true});
    },
    setChildNodesF(childNodes) {
      childNodes.forEach(item => {
        item.data.visiblity = false
        if (item.childNodes) {
          this.setChildNodesF(item.childNodes)
        }
      })
    },
    setChildNodesT(childNodes) {
      childNodes.forEach(item => {
        item.data.visiblity = true
        if (item.childNodes) {
          this.setChildNodesT(item.childNodes)
        }
      })
    },
    setChildrenF(children) {
      children.forEach(item => {
        item.visiblity = false
        if (item.children) {
          this.setChildrenF(item.children)
        }
      })
    },
    setChildrenT(children) {
      children.forEach(item => {
        item.visiblity = true
        if (item.children) {
          this.setChildrenT(item.children)
        }
      })
    },
    hideInfoTreeIds(ids) {
      __g.infoTree.hide(ids);
      for (let id of ids) {
        if (id === 'plant') {
          __g.misc.hideAllFoliages();
        }
        let node = this.$refs.infoTree.getNode(id);
        if (node && node.data && node.data.visiblity) {
          node.data.visiblity = false;
          if (node.childNodes.length > 0) {
            this.setChildNodesF(node.childNodes);
          }
        }
        this.$refs.infoTree.setChecked(id, false, true);
      }
    },
    showInfoTreeIds(ids) {
      __g.infoTree.show(ids);
      for (let id of ids) {
        if (id === 'plant') {
          __g.misc.showAllFoliages();
        }
        let node = this.$refs.infoTree.getNode(id);
        if (node && node.data && !node.data.visiblity) {
          node.data.visiblity = true;
          if (node.childNodes.length > 0) {
            this.setChildNodesT(node.childNodes);
          }
        }
        this.$refs.infoTree.setChecked(id, true, true);
      }
    },
    checkVisibility(children) {
      for (let obj of children) {
        if (!obj.visiblity) {
          console.log(obj.name, obj.visiblity)
          return false;
        }
        if (obj.children && obj.children.length > 0) {
          if (!this.checkVisibility(obj.children)) {
            return false;
          }
        }
      }
      return true;
    },
    checkInfoTree(node) {
      if (node.type === 'plant') {
        if (node.visiblity) {
          __g.misc.hideAllFoliages()
        } else {
          __g.misc.showAllFoliages()
        }
        node.visiblity = !node.visiblity
      } else if (node.type === 'EPT_Folder') {
        let allVisible = this.checkVisibility(node.children)
        if (allVisible) {
          __g.infoTree.hide(node.iD);
          if (node.children.length > 0) {
            this.setChildrenF(node.children);
          }
          this.$refs.infoTree.setChecked(node.iD, false, true);
        } else {
          __g.infoTree.show(node.iD);
          if (node.children.length > 0) {
            this.setChildrenT(node.children);
          }
          this.$refs.infoTree.setChecked(node.iD, true, true);
        }
        node.visiblity = !allVisible;
      } else {
        if (node.visiblity) {
          __g.infoTree.hide(node.iD);
        } else {
          __g.infoTree.show(node.iD);
        }
        node.visiblity = !node.visiblity;
      }
    },
    //隐藏开关
    hideActorMenu() {
      this.hide_object_flag = !this.hide_object_flag;
      this.showInfoTree = false;
      this.showAnimationImage = false;
      this.showFastLine = false;
      this.showVehicleMenu = false;
      this.showMarker = false;
      this.clearHideActorMenu()
      if (!this.hide_object_flag) {
        this.showLeftTools2[8].name = "隐藏:关";
      } else {
        this.showLeftTools2[8].name = "隐藏:开";
      }
    },
    //隐藏初始化
    clearHideActorMenu() {
      //高亮初始化
      __g.tileLayer.stopHighlightAllActors();
      __g.customObject.unhighlight();
      //重置隐藏选择的数组
      this.hide_object_ids = [];
      this.hide_object_num = 0;
      if (this.layerId_hide !== "" && this.layerId_hide !== null && this.layerId_hide !== undefined) {
        //恢复此次所有的隐藏
        __g.tileLayer.showAllActors(this.layerId_hide);
        __g.tileLayer.showAllActors("CBF5C2364B0A5AFF8E4CA18F47387ADD");
        __g.tileLayer.showAllActors("FADC6A6D4135294A54EA5F97AE8536DE");
        __g.tileLayer.showAllActors("F8334DBC41DD0191E549E583DF25C867");
        __g.tileLayer.showAllActors("9DF87C2441BF29C324F197A7F62EDF1F");
      }
      //隐藏的备用数组初始化
      this.hide_object_ids2 = [];
    },
    //隐藏响应事件
    hideActor_event(objectId, id) {
      //寸滩和地下管线
      if (
          id !== "F8334DBC41DD0191E549E583DF25C867" &&
          id !== "9DF87C2441BF29C324F197A7F62EDF1F"
      ) {
        alert("请选择名为:“寸滩或地下管线”的部件！");
      } else {
        //模型里的小模型才添加到数组里
        if (this.hide_object_num < this.hide_object_num_max) {
          //是否已经选择过
          if (this.hide_object_ids.includes(objectId)) {
            //选了就剔除
            this.hide_object_ids = this.hide_object_ids.filter(
                (item) => item !== objectId
            );
            console.log("删除" + objectId);
            this.hide_object_num--;
            __g.tileLayer.stopHighlightActor(id, objectId, function () {
              console.log("取消高亮成功");
            });
          } else {
            this.hide_object_ids[this.hide_object_num] = objectId;
            console.log("选择" + objectId);
            this.hide_object_num++;
            __g.tileLayer.highlightActor(id, objectId, function () {
              console.log("高亮成功");
            });
            this.layerId_hide = id;
          }
        }
      }
    },
    hideActor() {
      if (
          this.hide_object_num === 0 ||
          this.hide_object_ids === null ||
          this.hide_object_ids === []
      ) {
        alert("请先选择需要隐藏的对象！");
      } else {
        let a = [{id: this.layerId_hide, objectIds: this.hide_object_ids}];
        __g.tileLayer.hideActors(a, function () {
          console.log("隐藏成功");
        });
        this.hide_object_ids2 = this.hide_object_ids;
        this.hide_object_num2 = this.hide_object_num;
        //重置隐藏选择的数组
        this.hide_object_ids = [];
        this.hide_object_num = 0;
        console.log("重置隐藏数组");
      }
    },
    showActorsLast() {
      //最近一次恢复显示
      let b = [{id: this.layerId_hide, objectIds: this.hide_object_ids2}];
      __g.tileLayer.showActors(b, function () {
        console.log("恢复上次隐藏成功");
      });
      this.hide_object_ids = this.hide_object_ids2;
      this.hide_object_num = this.hide_object_num2;
      console.log("恢复上次隐藏数组");
    },
    newHide() {
      this.hide_object_ids = [];
      this.hide_object_ids2 = [];
      this.hide_object_num_max = 100;
      this.hide_object_num = 0;
      this.hide_object_num2 = 0;
      this.layerId_hide = "";
    },
    //选线
    fastLine() {
      this.showFastLine = !this.showFastLine;
      this.showAnimationImage = false;
      this.showInfoTree = false;
      this.showVehicleMenu = false;
      this.showMarker = false;
    },
    // 添加坐标到数组并更新显示
    addCoordinate() {
      if (
          isNaN(this.coordinate_x) ||
          isNaN(this.coordinate_y) ||
          this.coordinate_x.length === 0 ||
          this.coordinate_y.length === 0
      ) {
        alert("无效的坐标，请输入数字");
      } else {
        console.log(this.coordinate_x);
        let x = parseFloat(this.coordinate_x);
        let y = parseFloat(this.coordinate_y);
        let coordinate = [x, y];
        this.coordinates.push(coordinate);
        console.log(this.coordinates);
        this.coordinate_x = ""; // 清空输入框
        this.coordinate_y = ""; // 清空输入框
      }
    },
    // 删除特定坐标
    deleteCoordinate(index) {
      this.coordinates.splice(index, 1);
    },
    // 添加坐标到数组并更新显示
    addCoordinate3() {
      if (
          isNaN(this.coordinate3_x) ||
          isNaN(this.coordinate3_y) ||
          isNaN(this.coordinate3_z) ||
          this.coordinate3_y.length === 0 ||
          this.coordinate3_y.length === 0 ||
          this.coordinate3_z.length === 0
      ) {
        alert("无效的坐标，请输入数字");
      } else {
        let x = parseFloat(this.coordinate3_x);
        let y = parseFloat(this.coordinate3_y);
        let z = parseFloat(this.coordinate3_z);
        let coordinate3 = [x, y, z];
        this.coordinates3.push(coordinate3);
        console.log(this.coordinates3);
        this.coordinate3_x = ""; // 清空输入框
        this.coordinate3_y = ""; // 清空输入框
        this.coordinate3_z = ""; // 清空输入框
      }
    },
    // 删除特定坐标
    deleteCoordinate3(index) {
      this.coordinates3.splice(index, 1);
      this.addPolyLine_event2();
    },
    addPolygon_event(x, y, z) {
      this.coordinates3.push([x, y, z]);
      this.addPolygon_line(x, y, z);
    },
    async addPolygon_line(x, y, z) {
      __g.polyline.clear();
      //第一个点通过有固定位移的点来形成初始点
      if (this.coordinates3.length === 1) {
        //使用PolylineStyle样式的折线
        let ployLine = {
          //折线唯一标识id
          id: "ployLine_1",
          //构成折线的坐标点数组
          coordinates: [
            [x, y, z],
            [x + 1, y, z],
          ],
          //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          coordinateType: 0,
          //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          range: [0, 100000],
          //折线颜色
          color: "#51F2FF",
          //线宽，单位：米，默认值20
          thickness: 1,
          //亮度，取值范围：[0~1000]，默认值：0.5
          intensity: 5,
          //流速，取值范围：[0~1.0]，默认值：0.5
          flowRate: 1,
          //样式，0：直线， 1：曲线，注意：设置为曲线坐标点多的时候会非常影响添加添加效率
          shape: 0,
          //是否做深度检测，默认为true，true会被遮挡，false不会被遮挡
          depthTest: false,
          //折线样式，箭头/光流/贴地/实线/虚线等，取值范围：[0~7]，详情参考 PolylineStyle
          style: PolylineStyle.Normal,
          //材质贴图平铺比例
          tiling: 0,
        };
        let pArr = [];
        pArr.push(ployLine);
        await __g.polyline.add(pArr);
      } else {
        //后续的点直接绘制
        let ployLine = {
          //折线唯一标识id
          id: "ployLine_1",
          //构成折线的坐标点数组
          coordinates: this.coordinates3,
          //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          coordinateType: 0,
          //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          range: [0, 100000],
          //折线颜色
          color: "#51F2FF",
          //线宽，单位：米，默认值20
          thickness: 1,
          //亮度，取值范围：[0~1000]，默认值：0.5
          intensity: 5,
          //流速，取值范围：[0~1.0]，默认值：0.5
          flowRate: 1,
          //样式，0：直线， 1：曲线，注意：设置为曲线坐标点多的时候会非常影响添加添加效率
          shape: 0,
          //是否做深度检测，默认为true，true会被遮挡，false不会被遮挡
          depthTest: false,
          //折线样式，箭头/光流/贴地/实线/虚线等，取值范围：[0~7]，详情参考 PolylineStyle
          style: PolylineStyle.Normal,
          //材质贴图平铺比例
          tiling: 0,
        };
        let pArr = [];
        pArr.push(ployLine);
        await __g.polyline.add(pArr);
      }
    },
    //重置
    clearPolygonAll() {
      __g.polygon.clear();
      __g.polyline.clear();
      this.coordinate_x = "";
      this.coordinate_y = "";
      this.coordinate3_x = "";
      this.coordinate3_y = "";
      this.coordinate3_z = "";
      this.coordinates = [];
      this.coordinates3 = [];
      this.coordinates3_output = [];
    },
    //生成坐标，需要清空ps数组和显示页面
    async countCoordinate3s() {
      this.addPolygon_flag = false;
      //清空计算坐标数组
      this.coordinates3_output = [];
      for (let i = 0; i < this.coordinates3.length; i++) {
        //存放计算一个面的坐标的集合
        let pc = [];
        //以一个带选线坐标的面为完成面
        // pc.push(this.coordinates3[i]);
        if (i === 0) {
          //第一个点的完成面以第一个点和第二个点为基准
          for (let j = 0; j < this.coordinates.length; j++) {
            let A = this.coordinates3[0];
            let B = this.coordinates3[1];
            let P = this.coordinates[j];
            let x = P[0];
            let y = P[1];
            let p = this.countCoordinate3_first(A, B, x, y);
            pc.push(p);
          }
        } else {
          for (let j = 0; j < this.coordinates.length; j++) {
            let A = this.coordinates3[i - 1];
            let B = this.coordinates3[i];
            let P = this.coordinates[j];
            let x = P[0];
            let y = P[1];
            let p = this.countCoordinate3(A, B, x, y);
            pc.push(p);
          }
        }
        this.coordinates3_output.push(pc);
      }
    },
    //二维转三维坐标，以平面为基准，第一个点和其他点的计算方向不一样
    countCoordinate3_first(A, B, x, y) {
      let dx = B[0] - A[0];
      let dy = B[1] - A[1];
      let len = Math.sqrt(dx * dx + dy * dy);
      let p = [];
      p[0] = A[0] + (dy * x) / len;
      p[1] = A[1] - (dx * x) / len;
      p[2] = A[2] + y;
      return p;
    },
    countCoordinate3(A, B, x, y) {
      let dx = B[0] - A[0];
      let dy = B[1] - A[1];
      let len = Math.sqrt(dx * dx + dy * dy);
      let p = [];
      p[0] = B[0] + (dy * x) / len;
      p[1] = B[1] - (dx * x) / len;
      p[2] = B[2] + y;
      return p;
    },
    //生成图形
    addPolygon_1() {
      //单面数组
      let plane = [];
      //j遍历选线的所有点
      for (let j = 0; j < this.coordinates3.length - 1; j++) {
        //i遍历二维面的所有点
        for (let i = 0; i < this.coordinates3_output[0].length - 1; i++) {
          //取两点之间的两个面的点集合
          let A = this.coordinates3_output[j];
          let B = this.coordinates3_output[j + 1];
          //绘制面
          plane.push([A[i], A[i + 1], B[i + 1], B[i]]);
        }
      }
      this.addPolygon_2(plane);
      __g.polyline.clear();
    },
    async addPolygon_2(plane) {
      //对象数组
      let pArr = [];
      for (let i = 0; i < plane.length; i++) {
        let color = "";
        if (i % 2 === 0) {
          color = "#00FFFF";
        } else {
          color = "#DEB887";
        }
        let a = {
          id: i,
          coordinates: plane[i],
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          range: [1, 100000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          color: color, //多边形的填充颜色
          frameColor: Color.Blue, //边框颜色
          frameThickness: 0, //边框厚度
          intensity: 1, //亮度
          style: PolygonStyle.SingleColor, //单色 请参照API开发文档选取枚举
          depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
          // material: "/JC_CustomAssets/PolygonLibrary/Exhibition/平面_5", //自定义材质路径 设置后style相关参数会失效
          // scalarParameters: [{"name": "亮度", "value": 0.5}],  //材质数值类型参数
          // vectorParameters: [{"name": "颜色", "value": [0, 1, 0]}], //材质数组类型参数
        };
        pArr.push(a);
      }
      await __g.polygon.add(pArr);
      __g.polygon.focus("0", 50);
    },
    clearPolygon() {
      __g.polygon.clear();
      __g.polyline.clear();
    },
    //车辆
    vehicleMenu() {
      this.showVehicleMenu = !this.showVehicleMenu;
      this.showAnimationImage = false;
      this.showInfoTree = false;
      this.showFastLine = false;
      this.showMarker = false;
    },
    async addVehicle_event(x, y, z) {
      if (this.assetPath === "" || this.carColor === "") {
        this.$message.error("先编辑车辆");
      } else {
        __g.vehicle.clear();
        let camera = await __g.camera.get();
        let rotation = [camera.pitch, camera.yaw, 0];
        let vc1 = {
          id: "vc1",
          coordinateType: 0,
          coordinate: [x, y, z],
          assetPath: this.assetPath, //资源库车辆路径
          rotation: rotation,
          colorType: this.carColor, //0: 使用随机涂装颜色  大于0的正整数: 使用固定涂装颜色
          autoHeight: false,
          localOffset: [0, 0, 0],
          supportAttach: true,
        };
        __g.vehicle.add(vc1);
        //暂时有问题,单独true会黑屏，带位置定位记录不生效，很远
        if (this.followEnable) {
          __g.vehicle.focus(
              "vc1",
              this.followEnable,
              this.followDistance,
              3,
              [-10, 0, 0],
              [25, 0, 0]
          );
        } else {
          __g.vehicle.focus("vc1");
        }
        this.addVehicleFlag = false;
      }
    },
    clearVehicle() {
      __g.vehicle.clear();
    },
    setVehicle() {
      this.setVehicleFlag = true;
      this.points = [];
    },
    async setVehicle_event(x, y, z) {
      this.points.push([x, y, z]);
      await __g.polyline.delete(["p1"]);
      //自定义材质的折线
      let p1 = {
        id: "p1", //折线唯一标识id
        coordinates: this.points, //构成折线的坐标点数组
        coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
        range: [1, 100000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
        color: [0, 1, 0, 0.5], //折线颜色绿色 半透明
        thickness: 1, //折线宽度
        intensity: 20, //亮度
        flowRate: 1, //流速
        shape: 1, //折线类型 0：直线， 1：曲线  注意：设置为曲线非常影响添加效率
        depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
        style: PolylineStyle.Arrow1, //折线样式 参考样式枚举：PolylineStyle
        tiling: 0, //材质贴图平铺比例
        // material: "/JC_CustomAssets/PolylineLibrary/Exhibition/线_7", //自定义材质路径 设置后style相关参数会失效
        // scalarParameters: [{"name": "亮度1", "value": 0.5}],  //材质数值类型参数
        // vectorParameters: [{"name": "颜色1", "value": [0, 1, 0]}], //材质数组类型参数
      };
      await __g.polyline.add(p1);
      // __g.polyline.focus(p1.id);
    },
    moveVehicle() {
      if (this.points.length < 1) {
        this.$message.warning("没有设置路径");
      } else {
        let way_points = [];
        for (let i = 0; i < this.points.length; i++) {
          let point = {
            timeStamp: i * 2,
            coordinate: this.points[i],
            gear: 3,
          };
          way_points.push(point);
        }
        let wayVehicle = [
          {
            id: "vc1",
            wayPoints: way_points,
          },
        ];
        __g.vehicle.setWayPoint(wayVehicle);
        let data = {id: "vc1", timeStamp: 0};
        __g.vehicle.start(data);
      }
    },
    hideOrShowPolyline() {
      if (this.showPolyline) {
        __g.polyline.hide("p1");
        this.showPolyline = false;
      } else {
        __g.polyline.show("p1");
        this.showPolyline = true;
      }
    },
    outFollowEnable() {
      __g.vehicle.focus("vc1");
    },
    //标签
    markerMenu() {
      this.showMarker = !this.showMarker;
      this.showAnimationImage = false;
      this.showInfoTree = false;
      this.showFastLine = false;
      this.showVehicleMenu = false;
    },
    async addMarker_event(xyz) {
      if (
          this.markerName === "" ||
          this.markerBgColor === "" ||
          this.markerFontColor === ""
      ) {
        this.$message.error("先编辑标签");
      } else {
        let path = window.location.host;
        let id = this.markerNum + "marker";
        this.markerLineWidth = parseInt(this.markerLineWidth);
        this.markerLineHeight = parseInt(this.markerLineHeight);
        this.markerFontSize = parseInt(this.markerFontSize);
        //支持经纬度坐标和普通投影坐标两种类型
        let o1 = {
          id: id,
          groupId: "markerAdd",
          coordinate: xyz, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          anchors: [-25, 50], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
          imageSize: [50, 50], //图片的尺寸
          hoverImageSize: [50, 50], //鼠标悬停时显示的图片尺寸
          range: [1, 10000], //可视范围
          // imagePath: path + '/marker/' + this.markerImage,//显示图片路径
          // hoverImagePath: path + '/marker/' + this.markerImage,// 鼠标悬停时显示的图片路径
          fixedSize: false, //图片固定尺寸，取值范围：false 自适应，近大远小，true 固定尺寸，默认值：false

          text: this.markerName, //显示的文字
          useTextAnimation: false, //关闭文字展开动画效果 打开会影响效率
          textRange: [1, 1000], //文本可视范围[近裁距离, 远裁距离]
          textOffset: [0, 0], // 文本偏移
          textBackgroundColor: this.markerBgColor, //文本背景颜色
          fontSize: this.markerFontSize, //字体大小
          fontOutlineSize: this.markerFontOutlineSize, //字体轮廓线大小
          fontColor: this.markerFontColor, //字体颜色
          fontOutlineColor: "#000000", //字体轮廓线颜色

          // popupURL: HostConfig.Path + '/samples/popup/interact.html',//弹窗HTML链接
          // popupBackgroundColor: [1.0, 1.0, 1.0, 0.5],//弹窗背景颜色
          // popupSize: [300, 300],//弹窗大小
          // popupOffset: [0, 0],//弹窗偏移

          showLine: this.markerShowLine, //标注点下方是否显示垂直牵引线
          lineSize: [this.markerLineWidth, this.markerLineHeight], //垂直牵引线宽度和高度[width, height]
          lineColor: "#ffffff", //垂直牵引线颜色
          lineOffset: [0, 0], //垂直牵引线偏移

          autoHidePopupWindow: true, //失去焦点后是否自动关闭弹出窗口
          autoHeight: false, // 自动判断下方是否有物体
          displayMode: 4, //智能显示模式  开发过程中请根据业务需求判断使用四种显示模式
          clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
          priority: 0, //避让优先级
          occlusionCull: false, //是否参与遮挡剔除
        };
        this.markerNum++;
        //海量poi添加请使用批量添加 提供效率
        await __g.marker.add(o1);
        __g.marker.focus(o1.id, 100, 1);
        this.markerLists.push(o1);
        this.addMarkerFlag = false;
      }
    },
    focusMarker(id) {
      __g.marker.focus(id, 100, 1);
    },
    async editMarker(marker, index) {
      let str = await __g.marker.get("0marker");
      console.log(str);
      this.test();
    },
    deleteMarker(id, index) {
      __g.marker.delete(id);
      this.markerLists.splice(index, 1);
    },
    clearMarker() {
      __g.marker.clear();
    },

    /*
        左、右图表的点击事件
        */
    //右table1的点击回调方法
    tableClick(row, column, cell, event) {
      // console.log(row.id + '-' + row.name)
      switch (row.name) {
        case "AH1路":
          this.recoverUnderground();
          this.showLeftTxt2 = true;
          __g.camera.set(
              -804992.143281,
              3354164.397656,
              203.475039,
              3.696423,
              -17.728655,
              3
          );
          this.leftTxt1 = this.txtDetails[1].projectOverview;
          this.leftTxt2 = this.txtDetails[1].designSchedule;
          this.leftTxt3 = this.txtDetails[1].situationQuality;
          break;
        case "AZ1路":
          this.recoverUnderground();
          this.showLeftTxt2 = true;
          __g.camera.set(
              -805064.637422,
              3354282.125469,
              220.45418,
              -19.624205,
              -113.298615,
              3
          );
          this.leftTxt1 = this.txtDetails[2].projectOverview;
          this.leftTxt2 = this.txtDetails[2].designSchedule;
          this.leftTxt3 = this.txtDetails[2].situationQuality;
          break;
        case "车库联络道":
          __g.camera.set(
              -805096.732617,
              3354366.242969,
              214.045684,
              -46.376865,
              -112.749611,
              3
          );
          let a = [
            {id: "F8334DBC41DD0191E549E583DF25C867", objectIds: [1102, 1087]},
          ];
          __g.tileLayer.hideActors(a, function () {
            console.log("隐藏成功");
          });
          let b = [
            {
              id: "9DF87C2441BF29C324F197A7F62EDF1F",
              objectIds: [20435, 19957],
            },
          ];
          __g.tileLayer.hideActors(b, function () {
            console.log("隐藏成功");
          });
          break;
        default:
          break;
      }
    },
    //右table1方法的合并方法
    objectSpanMethod1({row, column, rowIndex, columnIndex}) {
      if (columnIndex === 0) {
        if (rowIndex === 0) {
          return {
            rowspan: 10,
            colspan: 1,
          };
        } else if (rowIndex === 10) {
          return {
            rowspan: 5,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    //左进度图表
    _progressChart() {
      let dom = this.$refs.progress;
      if (!dom) {
        return;
      }
      let progressChart = echarts.init(dom);
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          formatter: function (params) {
            // 自定义提示信息的显示内容
            return params[0].name + ": " + params[0].value + "%";
          },
          textStyle: {
            color: "#000000", // 提示信息字体颜色
            fontSize: 16, // 提示信息字体大小
          },
        },
        //设置图表的网格，包括位置和大小
        grid: {
          top: "10%",
          left: "0",
          right: "20%",
          bottom: "0",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLabel: {
            color: "#ffffff",
            fontSize: "16px",
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          type: "category",
          data: this.progressData.detailArr.map(function (item) {
            return item.type;
          }),
          axisLabel: {
            color: "#ffffff",
            fontSize: "18px",
          },
          axisLine: {
            //x轴线配置
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            type: "bar",
            label: {
              show: true,
              position: "right",
              color: "#ffffff",
              fontSize: "16px",
            },
            itemStyle: {
              color: "rgba(60,112,249,0.8)", //设置柱子颜色
            },
            emphasis: {
              itemStyle: {
                color: "rgba(60,112,249,1)",
              },
            },
            barCategoryGap: "40%", // 柱子的粗细
            data: this.progressData.detailArr.map(function (item) {
              return item.amount;
            }),
          },
        ],
      };
      progressChart.setOption(option);
    },
    //右方位鸟瞰视角
    northView() {
      __g.camera.set(
          -804813.858086,
          3353136.092969,
          1075.420781,
          -33.09803,
          -93.257004,
          3
      );
    },
    southView() {
      __g.camera.set(
          -804891.590801,
          3355409.208438,
          1020.399453,
          -41.739899,
          89.881264,
          3
      );
    },
    westView() {
      __g.camera.set(
          -805697.478047,
          3354535.506406,
          1278.601719,
          -52.295425,
          0.524779,
          3
      );
    },
    eastView() {
      __g.camera.set(
          -803905.876172,
          3354511.033906,
          1047.489531,
          -41.712418,
          179.832886,
          3
      );
    },
    //地块
    getColor(id) {
      if (id === "1") {
        return "#FFFF7F";
      } else if (id === "2") {
        return "#FFBF7F";
      } else if (id === "3") {
        return "#FF7FFF";
      } else if (id === "4") {
        return "#FFBF00";
      } else if (id === "5") {
        return "#FF0000";
      } else if (id === "6") {
        return "#FF0000";
      } else if (id === "7") {
        return "#007FFF";
      } else if (id === "8") {
        return "#7FF000";
      } else if (id === "9") {
        return "#007F0F";
      } else if (id === "10") {
        return "#ADADAD";
      } else if (id === "11") {
        return "#00FFFF";
      } else if (id === "12") {
        return "#33CC00";
      }
    },

    /*
        顶部方案的点击事件
        */
    //方案列表
    async changeReport(item) {
      console.log(item)
      this.titleLists = item.title;
      console.log(this.titleLists)
      this.reportTour = item.tour;
      this.reportPlanName = item.name;
      nextTick(() => {
        this.changePage(this.titleLists[0].pageLists[0], 0, 0);
      });
      for (let i = 0; i < this.titleLists.length; i++) {
        this.titleLists[i].showTitlePage = false;
        this.titleLists[i].iconClass = "body-title-icon ri-arrow-drop-right-line";
      }
      //各个功能初始化
      this.recoverPage();
      this.showLeftTools1 = false;//左侧工具栏
      this.newHide(); //隐藏
      this.newPage(); //分页
      this.backToAll(); //寸滩模型交互
      //整体的线路和标签
      // await this.addPolyline();
      // await this.addMarker();
    },
    deleteReport(item, index) {
      axios.post(this.$demo + "/delete", {}, {params: {name: item.name}})
          .then((response) => {
            this.reportLists.splice(index, 1);
          }).catch((error) => {
        console.log(error);
      });
    },
    getLists(flag) {
      axios.get(this.$demo + "/get")
          .then((response) => {
            console.log(response)
            let lists = [];
            for (let i = 0; i < response.data.length; i++) {
              let data = JSON.parse(response.data[i].title);
              let list = {
                title: data.data.title,
                tour: data.data.tour,
                name: response.data[i].name,
              };
              lists.push(list);
            }
            this.reportLists = lists;
            if (flag) {
              if (this.reportLists && this.reportLists.length > 0) {
                this.changeReport(this.reportLists[0]);
              }
            }
          })
          .catch((error) => {
            console.log(error);
          });
    },

    /*
        底部翻页的点击事件
        */
    //底部切换页面
    getBottomPx(n) {
      let length = this.titleLists.length;
      let px = (length - n - 1) * 37 + 35;
      console.log(px)
      return px + 'px';
    },
    showWhiteFalse() {
      setTimeout(() => {
        this.showWhite = false;
      }, 1000);
    },
    nextPage() {
      if (this.titleIndex === "" && this.pageIndex === "") {
        this.changePage(this.titleLists[0].pageLists[0], 0, 0);
        console.log("开始播放");
      } else if (this.titleIndex !== "" && this.pageIndex === "") {
        this.changePage(this.titleLists[this.titleIndex].pageLists[0], this.titleIndex, 0);
        console.log("标题第一页");
      } else if (this.pageIndex < this.titleLists[this.titleIndex].pageLists.length - 1) {
        let F = this.titleIndex;
        let C = this.pageIndex + 1;
        this.changePage(this.titleLists[F].pageLists[C], F, C);
        console.log("下一页");
      } else if (this.titleIndex < this.titleLists.length - 1) {
        let F = this.titleIndex + 1;
        let C = 0;
        this.changePage(this.titleLists[F].pageLists[C], F, C);
        console.log("下一个标题");
      } else {
        console.log("播放完毕");
      }
    },
    lastPage() {
      if (this.titleIndex === "" && this.pageIndex === "") {
        console.log("选择一页开始播放");
      } else if (this.titleIndex !== "" && this.pageIndex === "" && this.titleIndex !== 0
      ) {
        let C = this.titleLists[this.titleIndex - 1].pageLists.length - 1;
        this.changePage(this.titleLists[this.titleIndex - 1].pageLists[C], this.titleIndex - 1, C);
        console.log("标题的前一个标题的最后一页");
      } else if (this.pageIndex > 0) {
        let C = this.pageIndex - 1;
        let F = this.titleIndex;
        this.changePage(this.titleLists[F].pageLists[C], F, C);
        console.log("上一页");
      } else if (this.titleIndex > 0) {
        let F = this.titleIndex - 1;
        let C = this.titleLists[F].pageLists.length - 1;
        this.changePage(this.titleLists[F].pageLists[C], F, C);
        console.log("上一个标题");
      } else {
        console.log("已到第一页");
      }
    },
    backToAll() {
      this.stopModel()
    },
    test(e) {
      console.log(e)
      // this.$message.warning("努力开发中");
    },
    /*
     * 初始化*/
    async addPolyline() {
      let pArr = [];
      initApiData.lineArr.forEach((item, index) => {
        let p1 = {
          id: item.id, //折线唯一标识id
          coordinates: item.pointArr, //构成折线的坐标点数组
          coordinateType: 0, //坐标系类型，取值范围：0为Projection类型，1为WGS84类型，2为火星坐标系(GCJ02)，3为百度坐标系(BD09)，默认值：0
          range: [10000, 100000], //可视范围：[近裁距离, 远裁距离]，取值范围: [任意负值, 任意正值]
          color: item.color, //折线颜色
          thickness: 300, //折线宽度
          intensity: 5, //亮度
          flowRate: 0.5, //流速
          shape: 0, //折线类型 0：直线， 1：曲线
          depthTest: false, //是否做深度检测 开启后会被地形高度遮挡
          style: PolylineStyle.OnTerrain, //折线样式 参考样式枚举：PolylineStyle
          tiling: 1, //材质贴图平铺比例
        };
        pArr.push(p1);
      });
      await __g.polyline.add(pArr);
    },
    async addMarker() {
      let path = window.location.host;
      let allMarkArr = [];
      initApiData.markerArr.forEach((item, index) => {
        let one = {
          id: item.id,
          groupId: "markerName",
          coordinate: item.coordinate, //坐标位置
          coordinateType: 0, //默认0是投影坐标系，也可以设置为经纬度空间坐标系值为1
          anchors: [0, 0], //锚点，设置Marker的整体偏移，取值规则和imageSize设置的宽高有关，图片的左上角会对准标注点的坐标位置。示例设置规则：x=-imageSize.width/2，y=imageSize.height
          range: [20000, 100000], //可视范围
          text: item.text, //显示的文字
          useTextAnimation: true, //关闭文字展开动画效果 打开会影响效率
          textRange: [1, 3000], //文本可视范围[近裁距离, 远裁距离]
          textOffset: [0, 0], // 文本偏移
          textBackgroundColor: item.color, //文本背景颜色
          fontSize: 22, //字体大小
          fontOutlineSize: 1, //字体轮廓线大小
          fontColor: "#FFFFFF", //字体颜色
          fontOutlineColor: "rgba(0,0,0,0)", //字体轮廓线颜色
          showLine: false, //标注点下方是否显示垂直牵引线
          autoHidePopupWindow: true, //失去焦点后是否自动关闭弹出窗口
          autoHeight: false, // 自动判断下方是否有物体
          displayMode: 2, //智能显示模式  开发过程中请根据业务需求判断使用四种显示模式
          clusterByImage: true, // 聚合时是否根据图片路径分类，即当多个marker的imagePath路径参数相同时按路径对marker分类聚合
          priority: 0, //避让优先级
          occlusionCull: false, //是否参与遮挡剔除
        };
        allMarkArr.push(one);
      });
      await __g.marker.add(allMarkArr);
    },
    initPlayer() {
      let host = this.$globalVariable;
      let _onReady = async () => {
        await this.getInfoTree()
        this.$refs.infoTree.setCheckedKeys(['ProjectTree_Root', 'plant'], false);
        this.getLists(true);
        this.getSliderTime()
        __g.polygon.clear();
        __g.polyline.clear();
        __g.marker.clear();
        this.backToAll();
        let mask = MousePickMask.MouseClick | MousePickMask.MouseHover;
        __g.settings.setMousePickMask(mask);
      };
      let _onEvent = async (event) => {
        console.log(event);
        let eventType = event.eventtype; //事件类型 参考交互事件类型枚举对象
        let id = event.Id; //图层id
        let objectId = event.ObjectID;
        let groupId = event.GroupID;
        let oId = event.OID;
        let modelName = event.ModelName;
        let propertyName = event.PropertyName;
        let name = event.Name;
        let type = event.Type;
        let userData = event.UserData;
        let objectLocation = event.MouseClickPoint; //当前点击位置
        switch (eventType) {
          case "LeftMouseButtonClick": // 鼠标左键点击时触发方法
            let x = objectLocation[0];
            let y = objectLocation[1];
            let z = objectLocation[2];
            let xyz = [x, y, z];
            console.log(xyz);
            //剖切响应
            if (this.VolumeClip_flag) {
              this.volumeClip_event(x, y, z);
              break;
            }

            //竖剖
            if (this.PlaneClip_flag) {
              await this.planeClip_event(x, y, z);
              break;
            }

            //隐藏响应
            if (this.hide_object_flag) {
              this.hideActor_event(objectId, id);
              break;
            }

            //地块分析
            if (
                this.titleIndex === 3 &&
                this.pageIndex === 4 &&
                id === "FC6DE18E41785931B3D308957DEF25C7"
            ) {
              this.leftTxt1 = this.analysisTxt[0].a;
              this.leftTxt2 = this.analysisTxt[0].b;
              this.leftTxt3 = this.analysisTxt[0].c;
              this.leftTxt4 = this.analysisTxt[0].d;
              this.show24_leftAll = true;
              break;
            }
            if (
                this.titleIndex === 3 &&
                this.pageIndex === 4 &&
                id === "1563FFDC4D87EAAB928BB7BB5FC900BA"
            ) {
              this.leftTxt1 = this.analysisTxt[1].a;
              this.leftTxt2 = this.analysisTxt[1].b;
              this.leftTxt3 = this.analysisTxt[1].c;
              this.leftTxt4 = this.analysisTxt[1].d;
              this.show24_leftAll = true;
              break;
            }

            //各个项目展示
            if (type === "marker" && id.length < 20) {
              // this.clickProjectName = id;
              // if (this.projectName !== this.clickProjectName) {
              //   this.clickProjectName = "";
              // } else {
              //   this.showCunTan = id === "marker-cunTan";
              // }
              //排除其他标签的影响
              switch (id) {
                case "marker-jiaHua":
                  __g.camera.set(
                      -813427.618594,
                      3347652.033125,
                      813.964844,
                      -42.672722,
                      -28.507675,
                      3
                  );
                  break;
                case "marker-eGongYan":
                  __g.camera.set(
                      -811964.039375,
                      3343669.3225,
                      751.795859,
                      -42.786121,
                      -123.594261,
                      3
                  );
                  break;
                case "marker-caiJia":
                  __g.camera.set(
                      -814568.009575,
                      3364531.490391,
                      917.150547,
                      -40.854332,
                      15.121278,
                      3
                  );
                  break;
                case "marker-nanJiMen":
                  __g.camera.set(
                      -808727.226406,
                      3345868.819063,
                      760.817188,
                      -38.742229,
                      -49.713428,
                      3
                  );
                  break;
                case "marker-cunTan":
                  __g.camera.set(
                      -804978.094688,
                      3353737.951875,
                      1261.426875,
                      -53.57439,
                      -82.278275,
                      3
                  );
                  break;
                case "marker-changAnQiChe":
                  __g.camera.set(
                      -788152.429844,
                      3354909.36125,
                      1517.065469,
                      -68.408165,
                      -81.31881,
                      3
                  );
                  break;
                default:
                  break;
              }
              //指定的项目才显示标题和分页
              // this.showCunTan = id === 'marker-cunTan';
              // this.showNanJiMen = id === 'marker-nanJiMen';
              // if (this.showNanJiMen) {
              //   this.leftTxt1 = this.txtDetails[0].projectOverview;
              //   this.leftTxt2 = this.txtDetails[0].designSchedule;
              //   this.leftTxt3 = this.txtDetails[0].situationQuality;
              //   this.leftTxt4 = this.analysisTxt[0].d;
              // }
            }

            //选线的点选响应
            if (this.addPolygon_flag) {
              await this.addPolygon_event(x, y, z);
            }

            //水淹分析，存两个点，一个起点和终点
            if (this.startFloodFill_flag) {
              this.startFloodFill_flag = false;
              this.$refs.floodFillPopupRef.addFloodFill(x, y, z)
              break;
            }

            if (this.startFluid_flag) {
              await this.$refs.fluidSimulationPopupRef.addFluidSimulation(objectLocation)
              this.startFluid_flag = false;
              break;
            }

            //添加车辆
            if (this.addVehicleFlag) {
              await this.addVehicle_event(x, y, z);
              break;
            }

            //车辆轨迹
            if (this.setVehicleFlag) {
              await this.setVehicle_event(x, y, z);
              break;
            }

            //标签
            if (this.addMarkerFlag) {
              await this.addMarker_event(xyz);
              break;
            }

            break;

            //鼠标悬停时触发此事件
            //注意需提前开启鼠标拾取：fdapi.settings.setMousePickMask(7);
          case "MouseHovered":
            // console.log('触发事件类型：鼠标悬停，eventType：' + eventType);
            break;

            //鼠标移动时触发此事件
            //注意需提前开启鼠标拾取：fdapi.settings.setMousePickMask(7);
          case "MouseMoved":
            // console.log('触发事件类型：鼠标移动，eventType：' + eventType);
            break;

            //相机开始移动时触发此监听事件
            //注意需先开启事件：fdapi.settings.setEnableCameraMovingEvent(true);
          case "CameraStartMove":
            // console.log('触发事件类型：相机开始飞行，eventType：' + eventType);
            break;

            //相机正在移动时触发此监听事件
            //注意需先开启事件：fdapi.settings.setEnableCameraMovingEvent(true);
          case "CameraMoving":
            // console.log('触发事件类型：相机正在飞行，eventType：' + eventType);
            break;

            //相机停止移动时触发此监听事件
            //注意需先开启事件：fdapi.settings.setEnableCameraMovingEvent(true);
          case "CameraStopMove":
            // console.log('触发事件类型：相机停止飞行，eventType：' + eventType);
            break;

            //对象执行focus()或相机执行set()/lookAt()/lookAtBBox()方法时触发
          case "CameraChanged":
            // console.log('触发事件类型：相机位置发生变化，eventType：' + eventType);
            break;

            //进入面剖切模式，编辑面剖切位置后触发事件并返回剖切结果
          case "PlaneClipEdit":
            // console.log('触发事件类型：编辑面剖切，eventType：' + eventType);
            break;

            //进入体剖切模式，编辑体剖切位置后触发事件并返回剖切结果
          case "VolumeClipEdit":
            // console.log('触发事件类型：编辑体剖切，eventType：' + eventType);
            break;

            //进入测量模式后，测量完成时触发此事件并返回测量结果
          case "Measurement":
            // console.log('触发事件类型：测量完成，eventType：' + eventType);
            break;

            //播放导览结束触发此事件
            //fdapi.camera.playAnimation(id)和导览对象播放导览结束__g.cameraTour.play(id)均触发此事件
          case "CameraTourFinished":
            // console.log('触发事件类型：播放导览结束，eventType：' + eventType);
            break;

          case "touch":
            // console.log(111);
            break;
          default:
            break;
        }
      };
      let options = {
        //必选参数，网页显示视频流的dom节点id
        domId: "player",
        //必选参数，二次开发时必须指定，否则无法进行二次开发
        apiOptions: {
          //必选回调函数，视频流加载完成回调函数
          onReady: _onReady,
          //可选回调函数，视频流事件交互回调函数
          onEvent: _onEvent,
        },
        ui: {
          startupInfo: false, //默认值为true，初始化过程中是否显示左上角详细信息（如果不需要，直接去掉此属性即可）
          statusIndicator: false, //默认值为true，左上角闪烁的状态指示灯，可以从不同的颜色看出当前的状态
          statusButton: false, //默认值为false，是否在左下角显示信息按钮（如果不需要，直接去掉此属性即可）
          fullscreenButton: false, //默认值为false，是否在右下角显示全屏按钮（如果不需要，直接去掉此属性即可）
          homeButton: false, //默认值为false，是否在左下角显示“回到初始位置”按钮（如果不需要，直接去掉此属性即可）
          taskListBar: 1, //默认值为1，是否在下方显示“任务队列（API调用队列）”信息（0: 永不显示；1: 执行比较耗时的操作时显示；2: 一直显示）
          debugEventsPanel: false, //是否显示事件详细信息（仅用于调试）
          mainUI: false, //是否显示Cloud的UI工具栏，如果设置为true就显示，如果设置为false就隐藏，如果没有设置，就保持原状。
          campass: false, //是否显示指北针，如果设置为true就显示，如果设置为false就隐藏，如果没有设置，就保持原状。
        },
        keyEventTarget: "video",
      };
      __g = new DigitalTwinPlayer(host, options).getAPI();
      this.api = __g;
      console.log(this.api);
    },
  },
  created() {
    this.titleLists = this.titleLists001;
    for (let i = 0; i < this.titleLists.length; i++) {
      this.titleLists[i].showTitlePage = false;
      this.titleLists[i].titleClass = "";
      this.titleLists[i].iconClass = "body-title-icon ri-arrow-drop-right-line";
    }
    console.log("初始化模板");
  },
  mounted() {
    this._progressChart();
    // 监听全局按键事件
    document.addEventListener("keydown", this.onKeyDown);
    document.addEventListener("mousedown", this.onMouseDown);
    // 初始化API实例并启动渲染，DigitalTwinPlayer对象的构造参数请参考API开发文档
    this.initPlayer();
  },
  beforeDestroy() {
    __g.destroy();
    // 在组件销毁前移除事件监听器，防止内存泄漏
    document.removeEventListener("keydown", this.onKeyDown);
    document.removeEventListener("mousedown", this.onMouseDown);
  },
  destroyed() {
    //关闭云渲染并释放资源
    __g.destroy();
  },
};
</script>
